grid with group header / row, Records with group header

I got a task to display records grouped by a value. data controls don’t have the capability to display records grouped by some value. My alternative is to use some third party controls such as Telerik etc. but there are some technical limitations and funding problems as well. I got to figure out my own way of doing the same.  I developed a sample (Proof of concept) to achieve the same. I am attaching the sample with this

The main idea behind is to use two repeater controls (any template based rendering controls). The outer repeater control’s ItemTemplate will host the header information and inner repeater control. The inner repeater control will host the records corresponding to the header (Group By column)

The main logic in Item databound is

1. Get the record being bound and get all the records corresponding to group by column and add those into temporary list
2. Build the header information with the values from the record being bound
3. Bind the records from tempoarary list (from 1) into the inner repeater
4. Ignore the record being bound and other records of the same group.

This sample can be generalized further to make it even more generic into a custom control/user control. Right now sample is assuming that the data source is sorted out by the group by column which we can sort out by ourselves in the custom control.  Since I don’t have time to develop this into a generic control I am leaving this out to viewers.

Below is the code snippet on the data bound part.

 if (e.Item.ItemType != ListItemType.Item && e.Item.ItemType != ListItemType.AlternatingItem) return;
 var person = ((Person) e.Item.DataItem);

if (!tempList.Contains<Person>(person))
 var role = person.Role;
 var columnGroupHeaderH4 = (Label)e.Item.FindControl("lblGroupHeader");
 columnGroupHeaderH4.Text = role;

tempList = ((List<Person>)this.rprGroupHeader.DataSource).Where(p => p.Role == role).ToList();

var employeeList = (Repeater) e.Item.FindControl("rprGroupRecords");
 employeeList.DataSource = tempList;

Below is the aspx page

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeFile="GroupByGrid.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
Show records with Group By headers
Below is a sample grid that that show records with group by header. Following is
implemented with a repeater but it could be implemented with other templated based
rendering grids.
<asp:Repeater ID="rprGroupHeader" runat="server" OnItemDataBound="rprGroupHeader_ItemDataBound">
<asp:Label runat="server" ID="lblGroupHeader"> </asp:Label></h3>
<asp:Repeater runat="server" ID="rprGroupRecords">
<div style="float: left;width:150px">
<%#((Person)Container.DataItem).FirstName %>
<div style="float: left;width:150px">
<%#((Person)Container.DataItem).LastName %>
<div style="float: left;width:75px">
<%#((Person)Container.DataItem).Role %>
<div style="float: left;width:50px">
<%#((Person)Container.DataItem).Department %>
<div style="float: left;width:150px">
<div style="float: left;width:150px">
<div style="float: left;width:100px">
<div style="clear:both" />

About Thiru

I'm a full stack developer and have held roles in engineering & product. Contact details Email : / website:
Aside | This entry was posted in Uncategorized. Bookmark the permalink.

4 Responses to grid with group header / row, Records with group header

  1. Franck D says:

    Nice. Helped me a lot.
    Thank you

  2. Syed Abbas says:

    Great approach. Little resource consuming but better than available options.

  3. Gonzalo Mejia says:

    Please, can you upload again Thanks

Leave a Reply to Franck D Cancel reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s