Click here to Skip to main content
15,033,219 members
Articles / Web Development / ASP.NET
Posted 9 Feb 2004


58 bookmarked

Separating Datagrid Items

Rate me:
Please Sign up or sign in to vote.
4.78/5 (26 votes)
9 Feb 20042 min read
How to add a separator row to set off groups of similar data in an ASP.NET Datagrid
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 Pin
lulintaous15-Jun-09 19:50
Memberlulintaous15-Jun-09 19:50 
GeneralItemIndex seems to be oiut of line when grid separator rows are added Pin
mctears28-Nov-07 2:04
Membermctears28-Nov-07 2:04 
QuestionDatagrid validation Pin
ramvara5-Oct-07 2:27
Memberramvara5-Oct-07 2:27 
G.GENOVESE24-Feb-06 6:23
MemberG.GENOVESE24-Feb-06 6:23 
GeneralLittle help with a Datagrid Pin
joe-black29-Nov-05 22:27
Memberjoe-black29-Nov-05 22:27 
GeneralRe: Little help with a Datagrid Pin
Marcie Jones30-Nov-05 16:24
MemberMarcie Jones30-Nov-05 16:24 
GeneralRe: Little help with a Datagrid Pin
joe-black1-Dec-05 20:03
Memberjoe-black1-Dec-05 20:03 
GeneralWell, it doesn't seem to work when you don't auto generate columns Pin
Alexander Yermakov21-Sep-05 11:15
MemberAlexander Yermakov21-Sep-05 11:15 
GeneralRe: Well, it doesn't seem to work when you don't auto generate columns Pin
Marcie Jones22-Sep-05 1:17
MemberMarcie Jones22-Sep-05 1:17 
QuestionWindows datagrid Pin
Mukund Pujari5-Sep-05 2:24
MemberMukund Pujari5-Sep-05 2:24 
GeneralRemoving Rows Pin
moquif18-May-05 5:41
Membermoquif18-May-05 5:41 
GeneralRe: Removing Rows Pin
moquif18-May-05 8:52
Membermoquif18-May-05 8:52 
GeneralYour thoughts to my approach .. Pin
vMike120-Dec-04 15:31
sussvMike120-Dec-04 15:31 
Generaltable cell not getting added in the prerender stage Pin
host54116-Nov-04 4:53
Memberhost54116-Nov-04 4:53 
GeneralRe: table cell not getting added in the prerender stage Pin
xlg28-Feb-05 21:14
Memberxlg28-Feb-05 21:14 
GeneralRe: table cell not getting added in the prerender stage Pin
michael ba10-Mar-05 9:38
Membermichael ba10-Mar-05 9:38 
GeneralRe: table cell not getting added in the prerender stage Pin
xlg10-Mar-05 22:31
Memberxlg10-Mar-05 22:31 
GeneralRe: table cell not getting added in the prerender stage Pin
joshihybrid28-Mar-05 10:38
Memberjoshihybrid28-Mar-05 10:38 
GeneralRe: table cell not getting added in the prerender stage Pin
RRRoamer5-May-05 10:15
MemberRRRoamer5-May-05 10:15 
QuestionPostback Losses Rows??? Pin
abtcabe13-Aug-04 9:43
Memberabtcabe13-Aug-04 9:43 
Generalstrange error Pin
jimg7211-Aug-04 19:27
Memberjimg7211-Aug-04 19:27 
GeneralViewState Pin
Fernando Finelli23-Jul-04 4:49
MemberFernando Finelli23-Jul-04 4:49 
GeneralNice - including simple version Pin
ParrotBoy22-Jul-04 0:06
MemberParrotBoy22-Jul-04 0:06 
GeneralFixing Wrapping in DataGrid with AutoGenerateColumns Pin
Chuck Lane17-Jun-04 11:10
MemberChuck Lane17-Jun-04 11:10 
Generalseparators and viewstate Pin
klugilbvjh23-Apr-04 3:51
Memberklugilbvjh23-Apr-04 3:51 

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

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