Click here to Skip to main content
15,867,780 members
Articles / Web Development / ASP.NET
Article

Separating Datagrid Items

Rate me:
Please Sign up or sign in to vote.
4.78/5 (26 votes)
9 Feb 20042 min read 221.3K   1.4K   58   42
How to add a separator row to set off groups of similar data in an ASP.NET Datagrid
Separated Datagrid

Introduction

For those that don't know me, I run a website about the ASP.NET Datagrid control, http://www.datagridgirl.com/.  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:

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

ItemDataBound

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.

VB.NET
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

PreRender

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.

VB.NET
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)
            DGI.Cells.Add(Cell)
            'Add one to skip past the Header item
            Tbl.Controls.AddAt(i + iAdded + 1, DGI)
            iAdded = iAdded + 1
        End If
    Next
End Sub

Conclusion

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.

License

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


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

Comments and Discussions

 
GeneralMy vote of 1 Pin
lulintaous15-Jun-09 19:50
lulintaous15-Jun-09 19:50 
GeneralItemIndex seems to be oiut of line when grid separator rows are added Pin
mctears28-Nov-07 2:04
mctears28-Nov-07 2:04 
QuestionDatagrid validation Pin
ramvara5-Oct-07 2:27
ramvara5-Oct-07 2:27 
GeneralINSERT VALUE IN SHOPPING CART Pin
G.GENOVESE24-Feb-06 6:23
G.GENOVESE24-Feb-06 6:23 
GeneralLittle help with a Datagrid Pin
joe-black29-Nov-05 22:27
joe-black29-Nov-05 22:27 
GeneralRe: Little help with a Datagrid Pin
Marcie Jones30-Nov-05 16:24
Marcie Jones30-Nov-05 16:24 
GeneralRe: Little help with a Datagrid Pin
joe-black1-Dec-05 20:03
joe-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
Alexander 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
Marcie Jones22-Sep-05 1:17 
QuestionWindows datagrid Pin
Mukund Pujari5-Sep-05 2:24
Mukund Pujari5-Sep-05 2:24 
GeneralRemoving Rows Pin
moquif18-May-05 5:41
moquif18-May-05 5:41 
GeneralRe: Removing Rows Pin
moquif18-May-05 8:52
moquif18-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
host54116-Nov-04 4:53 
GeneralRe: table cell not getting added in the prerender stage Pin
xlg28-Feb-05 21:14
xlg28-Feb-05 21:14 
GeneralRe: table cell not getting added in the prerender stage Pin
michael ba10-Mar-05 9:38
michael ba10-Mar-05 9:38 
GeneralRe: table cell not getting added in the prerender stage Pin
xlg10-Mar-05 22:31
xlg10-Mar-05 22:31 
GeneralRe: table cell not getting added in the prerender stage Pin
joshihybrid28-Mar-05 10:38
joshihybrid28-Mar-05 10:38 
GeneralRe: table cell not getting added in the prerender stage Pin
RRRoamer5-May-05 10:15
RRRoamer5-May-05 10:15 
QuestionPostback Losses Rows??? Pin
abtcabe13-Aug-04 9:43
abtcabe13-Aug-04 9:43 
Generalstrange error Pin
jimg7211-Aug-04 19:27
jimg7211-Aug-04 19:27 
Not sure what I'm doing wrong, but at this point...

tbl.Controls.AddAt(i + iAdded + 1, dgi);


I'm getting -- System.ArgumentOutOfRangeException: Specified argument was out of the range of valid values. Parameter name: index


Any Clues appreciated, I've banged on this for like 2 hours trying to figure out what's wrong and all the code looks correct.


Jim
GeneralViewState Pin
Fernando Finelli23-Jul-04 4:49
Fernando Finelli23-Jul-04 4:49 
GeneralNice - including simple version Pin
ParrotBoy22-Jul-04 0:06
ParrotBoy22-Jul-04 0:06 
GeneralFixing Wrapping in DataGrid with AutoGenerateColumns Pin
Chuck Lane17-Jun-04 11:10
Chuck Lane17-Jun-04 11:10 
Generalseparators and viewstate Pin
klugilbvjh23-Apr-04 3:51
klugilbvjh23-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.