Click here to Skip to main content
12,452,344 members (51,147 online)
Click here to Skip to main content
Add your own
alternative version

Stats

193.3K views
1.3K downloads
58 bookmarked
Posted

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

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:

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.

Private Sub dgSales_ItemDataBound(ByVal sender As Object, _
          ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) _
          Handles dgSales.ItemDataBound
   'Here we need to detect when a row has a new SalesDate, and add 
   'it to our array
   If e.Item.ItemType = ListItemType.Item Or _
      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}", _
                      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.

Private Sub dgSales_PreRender(ByVal sender As Object, _
                                  ByVal e As System.EventArgs) _
Handles dgSales.PreRender
    'Just before the Datagrid renders its output, add the extra 
        '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

Share

About the Author

Marcie Jones
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.

You may also be interested in...

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 
GeneralINSERT VALUE IN SHOPPING CART Pin
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
sitebuilderMarcie 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
sitebuilderMarcie 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
sussmichael 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 
GeneralRe: separators and viewstate Pin
Marcie Robillard (Datagrid Girl)23-Apr-04 3:57
staffMarcie Robillard (Datagrid Girl)23-Apr-04 3:57 
GeneralRe: separators and viewstate Pin
klugilbvjh23-Apr-04 4:39
memberklugilbvjh23-Apr-04 4:39 
GeneralRe: separators and viewstate Pin
klugilbvjh3-May-04 3:32
memberklugilbvjh3-May-04 3:32 
GeneralRe: separators and viewstate Pin
eladio19741-Jun-04 5:36
membereladio19741-Jun-04 5:36 
AnswerRe: separators and viewstate Pin
rsam_london17-Jun-08 20:06
memberrsam_london17-Jun-08 20:06 
GeneralLinkButton in DataGrid Pin
Joe10010012-Mar-04 8:45
sussJoe10010012-Mar-04 8:45 
GeneralC# Version Pin
ED91120-Feb-04 9:38
memberED91120-Feb-04 9:38 
GeneralRe: C# Version Pin
Marcie Robillard (Datagrid Girl)20-Feb-04 9:48
staffMarcie Robillard (Datagrid Girl)20-Feb-04 9:48 
GeneralRe: C# Version Pin
ED91120-Feb-04 10:01
memberED91120-Feb-04 10:01 
GeneralHardcoding values Pin
Jerry III17-Feb-04 21:21
memberJerry III17-Feb-04 21:21 
GeneralRe: Hardcoding values Pin
Marcie Robillard (Datagrid Girl)18-Feb-04 2:55
staffMarcie Robillard (Datagrid Girl)18-Feb-04 2:55 
GeneralRe: Hardcoding values Pin
Patrick McCarty15-Sep-05 9:14
sussPatrick McCarty15-Sep-05 9:14 
QuestionWhere have u been????? Pin
elihayun17-Feb-04 4:23
memberelihayun17-Feb-04 4:23 
Generalcongratz Pin
Franck Quintana17-Feb-04 0:28
memberFranck Quintana17-Feb-04 0:28 
GeneralRe: congratz Pin
Marcie Robillard (Datagrid Girl)17-Feb-04 1:15
staffMarcie Robillard (Datagrid Girl)17-Feb-04 1:15 
GeneralNice Pin
Marc Clifton10-Feb-04 13:30
editorMarc Clifton10-Feb-04 13:30 
GeneralRe: Nice Pin
Marcie Robillard (Datagrid Girl)10-Feb-04 13:44
staffMarcie Robillard (Datagrid Girl)10-Feb-04 13:44 

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.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160826.1 | Last Updated 10 Feb 2004
Article Copyright 2004 by Marcie Jones
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid