Currently I have a requirement to add a Grouped Items list in asp.net webforms. I found the best way to approach this was to nest a ListView inside a ListView and then use the Datasource to specify the grouping. The full code example is below and hopefully is self explanatory.
As you can see in the aspx page we have a listview for the groups and inside each ItemTemplate we have a nested ListView for the Items.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Grouping.aspx.cs" Inherits="Cas.Web.Grouping" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ListView ID="lstProductsListView" runat="server">
<LayoutTemplate>
<div class="grid">
<table id="products">
<tr class="header">
<th>Product Id</th>
<th>Product Name</th>
<th>ListPrice</th>
</tr>
<tr id="itemPlaceHolder" runat="server"></tr>
</table>
</div>
</LayoutTemplate>
<ItemTemplate>
<tr id="row" runat="server" class="group">
<th class="first"></th>
<th colspan="2"><%# Eval("GroupName") %>
(<%# Eval("Count") %> Count)</th>
</tr>
<asp:ListView ID="lstProducts" runat="server"
DataSource='<%# Eval("Items") %>'>
<LayoutTemplate>
<tr id="itemPlaceHolder" runat="server"></tr>
</LayoutTemplate>
<ItemTemplate>
<tr id="row" runat="server" class="items">
<td><%# Eval("ProductId") %></td>
<td><%# Eval("ProductName") %></td>
<td><%# Eval("ListPrice") %></td>
</tr>
</ItemTemplate>
</asp:ListView>
</ItemTemplate>
</asp:ListView>
<br />
</form>
</body>
</html>
The Code Behind, Notice I’m creating a ListGroup of Type Product, I can then specify the grouping title and list and add a list of products to the group. How you acheived this is data is up to you but I’d be inclined to simply write a conversion method.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Cas.Web
{
public partial class Grouping : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
var result = new List<ListGroup<MyProduct>>()
{
new ListGroup<MyProduct>()
{
GroupName = "Group 1",
Count = 3,
Items = new List<MyProduct>()
{
new MyProduct{
ProductId = "1",
ProductName = "Test1",
ListPrice = 4
},
new MyProduct{
ProductId = "2",
ProductName = "Test2",
ListPrice = 6
},
new MyProduct{
ProductId = "3",
ProductName = "Test3",
ListPrice = 8
}
}
},
new ListGroup<MyProduct>()
{
GroupName = "Group 2",
Count = 3,
Items = new List<MyProduct>()
{
new MyProduct{
ProductId = "1",
ProductName = "Test4",
ListPrice = 4
},
new MyProduct{
ProductId = "2",
ProductName = "Test5",
ListPrice = 6
},
new MyProduct{
ProductId = "3",
ProductName = "Test6",
ListPrice = 8
}
}
}
};
lstProductsListView.DataSource = result;
lstProductsListView.DataBind();
}
}
public class ListGroup<T>
{
public string GroupName { get; set; }
public int Count { get; set; }
public List<T> Items { get; set; }
}
public class MyProduct
{
public string ProductId { get; set; }
public string ProductName { get; set; }
public decimal ListPrice { get; set; }
}
}
The post Applying Grouping in an Asp.Net ListView appeared first on Net Awakening.
