Click here to Skip to main content
Click here to Skip to main content

Separating Datagrid Items

, 9 Feb 2004
Rate this:
Please Sign up or sign in to vote.
How to add a separator row to set off groups of similar data in an ASP.NET Datagrid
<!-- Add the rest of your HTML here -->Separated Datagrid


For those that don't know me, I run a website about the ASP.NET Datagrid control,  Inevitably, my first article here at CodeProject also focuses on the Datagrid control.  I also enjoy answering Datagrid questions here at CodeProject, and around the web.  A common question that comes up involves grouping similar data, and providing a visual cue to the user when a repeating data element has changed.

The Standard Datagrid

In a typical Datagrid, all columns are treated "equally".  For example, you may wish to display Sales by Date, and to meet that end, you might include an ORDER BY Date clause.  However, if the end user is primarily interested in seeing how these sales vary by date, then this standard implementation might not make that obvious enough to them, as shown:

Standard Sales Grid

The Separated Datagrid

A better approach might be to add a separator row between each new group of sales for a given day, as seen at the top of the article.  To do that, take advantage of two Datagrid events, ItemDataBound, and PreRender.  We'll also need two variables public to the page:

    Public LastDateValue As DateTime = Convert.ToDateTime("1/1/1901")
    Public NewValues(100) As String


During the grid's ItemDataBound event, detect whether the current row has a SalesDate that varies from the previous row.  If it is different, store the value in the NewValues array, and update the public variable for the LastDateValue.  You could also do some other manipulation here during the ItemDataBound event.  For example, if you wanted to also display a total for each date, that would be calculated during this event.

Private Sub dgSales_ItemDataBound(ByVal sender As Object, _
          ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) _<BR>          Handles dgSales.ItemDataBound
   'Here we need to detect when a row has a new SalesDate, and add <BR>   'it to our array
   If e.Item.ItemType = ListItemType.Item Or _<BR>      e.Item.ItemType = ListItemType.AlternatingItem Then
        NewValues(e.Item.ItemIndex) = ""
        If e.Item.DataItem("SalesDate") <> LastDateValue Then
            LastDateValue = e.Item.DataItem("SalesDate")
            NewValues(e.Item.ItemIndex) = String.Format("{0:D}", _<BR>                      e.Item.DataItem("SalesDate"))
        End If
    End If
End Sub


First off, I'm a fan of casting sender back to a Datagrid, and working with that rather than simply referring to the Datagrid by its ID.  That makes it easier if you ever copy/paste this code to another Datagrid---errr, I mean, if you move this code into a reusable component--yeah, that's what I meant.  Anyway.  You're already aware that the Datagrid ultimately renders as a <table> in HTML, but you may not have realized that you can access that table on the server-side using DG.Controls(0).  This table object is useful for several last-minute formatting tricks, including this one.

    Private Sub dgSales_PreRender(ByVal sender As Object, _<BR>                                  ByVal e As System.EventArgs) _
    Handles dgSales.PreRender
        'Just before the Datagrid renders its output, add the extra <BR>        'separator rows
        Dim DG As DataGrid = CType(sender, DataGrid)
        Dim Tbl As Table = DG.Controls(0)
        Dim DGI As DataGridItem
        Dim Cell As TableCell
        Dim i As Integer, iAdded As Integer = 0
        For i = 0 To NewValues.GetUpperBound(0)
            If NewValues(i) <> "" Then
                'Just so it picks up the formatting class for my Header
                'could have used ListItemType.Item
                DGI = New DataGridItem(0, 0, ListItemType.Header)
                Cell = New TableCell
                Cell.ColumnSpan = 3
                Cell.Text = NewValues(i)
                'Add one to skip past the Header item
                Tbl.Controls.AddAt(i + iAdded + 1, DGI)
                iAdded = iAdded + 1
            End If
    End Sub


With a few tricks, the Datagrid can help provide rich information to your client user base.  Don't by limited by the standard out-of-the-box output from this control - use the Datagrid's events to format the output to your heart's desire, and provide a more useful user interface.

An Alternate Approach

This problem can also be solved by nesting another Datagrid within the main Datagrid, binding the outer grid to a list of dates, and the inner grid to the sales, filtered for that date.  I may cover this technique in a future article.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Marcie Jones

United States United States
Marcie runs[^], a resource site for the ASP.NET Datagrid control, and now[^] for ASP.NET 2.0.

Comments and Discussions

GeneralMy vote of 1 Pinmemberlulintaous15-Jun-09 19:50 
GeneralItemIndex seems to be oiut of line when grid separator rows are added Pinmembermctears28-Nov-07 2:04 
QuestionDatagrid validation Pinmemberramvara5-Oct-07 2:27 
GeneralLittle help with a Datagrid Pinmemberjoe-black29-Nov-05 22:27 
GeneralRe: Little help with a Datagrid PinsitebuilderMarcie Jones30-Nov-05 16:24 
GeneralRe: Little help with a Datagrid Pinmemberjoe-black1-Dec-05 20:03 
GeneralWell, it doesn't seem to work when you don't auto generate columns PinmemberAlexander Yermakov21-Sep-05 11:15 
GeneralRe: Well, it doesn't seem to work when you don't auto generate columns PinsitebuilderMarcie Jones22-Sep-05 1:17 
QuestionWindows datagrid PinmemberMukund Pujari5-Sep-05 2:24 
GeneralRemoving Rows Pinmembermoquif18-May-05 5:41 
GeneralRe: Removing Rows Pinmembermoquif18-May-05 8:52 
GeneralYour thoughts to my approach .. PinsussvMike120-Dec-04 15:31 
Generaltable cell not getting added in the prerender stage Pinmemberhost54116-Nov-04 4:53 
GeneralRe: table cell not getting added in the prerender stage Pinmemberxlg28-Feb-05 21:14 
GeneralRe: table cell not getting added in the prerender stage Pinsussmichael ba10-Mar-05 9:38 
GeneralRe: table cell not getting added in the prerender stage Pinmemberxlg10-Mar-05 22:31 
GeneralRe: table cell not getting added in the prerender stage Pinmemberjoshihybrid28-Mar-05 10:38 
GeneralRe: table cell not getting added in the prerender stage PinmemberRRRoamer5-May-05 10:15 
QuestionPostback Losses Rows??? PinmemberABTCABE13-Aug-04 9:43 
Generalstrange error Pinmemberjimg7211-Aug-04 19:27 
GeneralViewState PinmemberFernando Finelli23-Jul-04 4:49 
GeneralNice - including simple version PinmemberParrotBoy22-Jul-04 0:06 
GeneralFixing Wrapping in DataGrid with AutoGenerateColumns PinmemberChuck Lane17-Jun-04 11:10 
Generalseparators and viewstate Pinmemberklugilbvjh23-Apr-04 3:51 
GeneralRe: separators and viewstate PinstaffMarcie Robillard (Datagrid Girl)23-Apr-04 3:57 
GeneralRe: separators and viewstate Pinmemberklugilbvjh23-Apr-04 4:39 
GeneralRe: separators and viewstate Pinmemberklugilbvjh3-May-04 3:32 
GeneralRe: separators and viewstate Pinmembereladio19741-Jun-04 5:36 
AnswerRe: separators and viewstate Pinmemberrsam_london17-Jun-08 20:06 
GeneralLinkButton in DataGrid PinsussJoe10010012-Mar-04 8:45 
GeneralC# Version PinmemberED91120-Feb-04 9:38 
GeneralRe: C# Version PinstaffMarcie Robillard (Datagrid Girl)20-Feb-04 9:48 
GeneralRe: C# Version PinmemberED91120-Feb-04 10:01 
GeneralHardcoding values PinmemberJerry III17-Feb-04 21:21 
GeneralRe: Hardcoding values PinstaffMarcie Robillard (Datagrid Girl)18-Feb-04 2:55 
GeneralRe: Hardcoding values PinsussPatrick McCarty15-Sep-05 9:14 
QuestionWhere have u been????? Pinmemberelihayun17-Feb-04 4:23 
Generalcongratz PinmemberFranck Quintana17-Feb-04 0:28 
GeneralRe: congratz PinstaffMarcie Robillard (Datagrid Girl)17-Feb-04 1:15 
GeneralNice PineditorMarc Clifton10-Feb-04 13:30 
GeneralRe: Nice PinstaffMarcie Robillard (Datagrid Girl)10-Feb-04 13:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140721.1 | Last Updated 10 Feb 2004
Article Copyright 2004 by Marcie Jones
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid