Showing posts with label ListView. Show all posts
Showing posts with label ListView. Show all posts

December 20, 2013

In the previous post, I showed how to use the group a ListView by a predefined number of items. Though this can be useful for displaying, it lacks the feature of not being able to group items by column or a range of data. In this post, I will show how to group a ListView by a range of data within a column.  I will the same data as in the previous post and modify it so it is ordered by age as shown below. I have done the ordering manually. I will bind the ListView and display data so it is grouped by age - for examples, it will be grouped by 10-20 years old, 20-30 years old, etc.
In the ListView declaration, I have changed the display to a list rather than the table for convenience. The ListView declaration is below.
ListView declaration
  1.     <asp:ListView ID="lv2" runat="server"ItemPlaceholderID="itemPlaceholder">
  2.  
  3.       <LayoutTemplate>
  4.         <ul>
  5.           <asp:Literal id="itemPlaceholder" runat="server" />
  6.         </ul>
  7.       </LayoutTemplate>
  8.      
  9.  
  10.       <ItemTemplate>
  11.                 <%# AddHeader() %>
  12.           <li><%# Eval("Name") %> : <%# Eval("Age") %></li>
  13.               </ItemTemplate>
  14.  
  15.   </asp:ListView>

I have also added a method AddHeader() as the first item within the Item Template. This method will add a list item that will be marked as the group identifier for the data. Here's the backend code for AddHeader() method. It's quite simple. It's important to note that updates the header property when the range changes and will only outputs the list item when there is a change.
AddHeader()
  1. public string header = string.Empty;
  2. public string AddHeader()
  3. {
  4.     int age = (int)Eval("Age");
  5.     string ans = "";
  6.  
  7.     if (age >= 10 && age < 20)
  8.         ans = "10 - 20";
  9.     else if (age >= 20 && age < 30)
  10.         ans = "20 - 30";
  11.     else if (age >= 30 && age < 40)
  12.         ans = "30 - 40";
  13.     else if (age >= 40 && age < 50)
  14.         ans = "40 - 50";
  15.  
  16.     if (ans == header)
  17.         ans = "";
  18.     else
  19.         header = ans;
  20.  
  21.     if (ans == "")
  22.         return "";
  23.     else
  24.         return "<li class='liheader'>" + ans + "</li>";
  25. }

I have also added css for styling and you can modify it as you see fit. Here's the css and the display when the code is run.
CSS
  1. <style>
  2.     .liheader {
  3.         font-weight:bold; background-color:gray;
  4.     }
  5.     li {
  6.         list-style: none;
  7.         width: 150px;
  8.         border:1px solid gray;
  9.         padding-left:4px;
  10.     }
  11. </style>
image
Here is the full code from code-behind in case you haven’t read my previous post.
Code behind - full page
  1. public partial class GroupList : System.Web.UI.Page
  2. {
  3.     protected void Page_Load(object sender, EventArgs e)
  4.     {
  5.         lv2.DataSource = GetList();
  6.         lv2.DataBind();
  7.     }
  8.  
  9.     private List<PersonClass> GetList()
  10.     {
  11.         List<PersonClass> list = new List<PersonClass>();
  12.  
  13.         list.Add(new PersonClass { Name = "Don", Age = 25 });
  14.         list.Add(new PersonClass { Name = "Andrew", Age = 25 });
  15.         list.Add(new PersonClass { Name = "Janette", Age = 27 });
  16.         list.Add(new PersonClass { Name = "Smith", Age = 30 });
  17.         list.Add(new PersonClass { Name = "Jane", Age = 32 });
  18.         list.Add(new PersonClass { Name = "Glenn", Age = 35 });
  19.         list.Add(new PersonClass { Name = "Jack", Age = 35 });
  20.         list.Add(new PersonClass { Name = "John", Age = 39 });
  21.         list.Add(new PersonClass { Name = "Peter", Age = 39 });
  22.         list.Add(new PersonClass { Name = "Robert", Age = 40 });
  23.         
  24.         return list;
  25.     }
  26.  
  27.     public string header = string.Empty;
  28.     public string AddHeader()
  29.     {
  30.         int age = (int)Eval("Age");
  31.         string ans = "";
  32.  
  33.         if (age >= 10 && age < 20)
  34.             ans = "10 - 20";
  35.         else if (age >= 20 && age < 30)
  36.             ans = "20 - 30";
  37.         else if (age >= 30 && age < 40)
  38.             ans = "30 - 40";
  39.         else if (age >= 40 && age < 50)
  40.             ans = "40 - 50";
  41.  
  42.         if (ans == header)
  43.             ans = "";
  44.         else
  45.             header = ans;
  46.  
  47.         if (ans == "")
  48.             return "";
  49.         else
  50.             return "<li class='liheader'>" + ans + "</li>";
  51.     }
  52. }
  53.  
  54. public class PersonClass
  55. {
  56.     public string Name { get; set; }
  57.     public int Age { get; set; }
  58. }
Reference: Shahed Kazi at AspNetify.com