Click here to Skip to main content
13,768,845 members
Click here to Skip to main content
Add your own
alternative version


51 bookmarked
Posted 7 May 2003

A Master Detail DataGrid

, 7 May 2003
Rate this:
Please Sign up or sign in to vote.
Implements a DataGrid with a Master/Detail view on data.

Master Detail Grid


Most of the examples that show a Master/Detail DataGrid do it using nested ListControls. This article shows how to accomplish the same using only a DataGrid-derived class.


The DataGrid shows exactly the number of rows that its DataSource has. Suppose you have the following need: show orders grouped by customers, but before a order from a new customer you show the customer details.

How can you do it?

Unfortunately there's no available/easy solution for it. You could create your own DataSource, manually adding the customer's details, and bind it to the grid. The solution I'll show is fairly easy to implement. All you have to do is to use the supplied DataGrid extended class and listen for the DataGridItemRender event. There you decide if you want to insert new rows into the DataGrid.</P.

Here's a code snippet of the provided sample project that adds customer information everytime the customerID of the order row changes:

private void grid_DataGridItemRender(object sender,
    CodeProject.MasterDetailGrid.DataGridItemRenderEventArgs e)
    DsCustomersOrders.OrdersRow order =
    bool insertCustomerInfo = true;

    if (e.ItemIndex > 0)
        DsCustomersOrders.OrdersRow previousOrder =
            this.dsCustomersOrders.Orders[e.ItemIndex - 1];
        insertCustomerInfo = previousOrder.CustomerID != order.CustomerID;

    if (insertCustomerInfo)
        // Gets the customer information
        DsCustomersOrders.CustomersRow customer = order.CustomersRow;

        // Customer name
        TableCell cellCustomerName = new TableCell();
        cellCustomerName.ColumnSpan = e.Grid.Columns.Count;
        cellCustomerName.Font.Bold = true;                
        cellCustomerName.Text = customer.CompanyName;
        cellCustomerName.HorizontalAlign = HorizontalAlign.Left;

        TableRow row1 = new TableRow();
        row1.BackColor = Color.Cyan;

        // Customer Country
        TableCell cellCustomerCountry = new TableCell();
        cellCustomerCountry.ColumnSpan = e.Grid.Columns.Count;
        cellCustomerCountry.Text = customer.Country;
        cellCustomerCountry.HorizontalAlign = HorizontalAlign.Right;

        TableRow row2 = new TableRow();
        row2.BackColor = row1.BackColor;

        e.NewRows = new TableRow[] { row1, row2 };

The way the MasterDetailGridhandles this event is fairly simple. Before the html is rendered the event is raised for each DataGridItem that the grid has. If new rows need to be added they are inserted in the grid's table. The rows collection which can be acessed using its Control property at index 0. Below is the code to accomplish it in the extended grid class:

/// Renders the DataGrid content
protected override void RenderContents(HtmlTextWriter output) 
    if (HasControls()) 
        Table table = this.Controls[0] as Table; 
        for (int i=0; i < table.Controls.Count; ++i) 
            DataGridItem item = (DataGridItem)table.Controls[i]; 
            if (item.ItemType == ListItemType.AlternatingItem
                || item.ItemType == ListItemType.Item) 
                DataGridItemRenderEventArgs args =
                    new DataGridItemRenderEventArgs(this, item.ItemIndex,
                // if the user added a new row to the NewRows property
                if (args.NewRows != null)
                    foreach (TableRow row in args.NewRows)
                        table.Rows.AddAt(i, row);


You can have customize the html ouput even more using this approach. Currently it only handles new rows.


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

Architect VisionOne AG
Switzerland Switzerland
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralMy vote of 1 Pin
Mohit 314-Mar-12 1:06
memberMohit 314-Mar-12 1:06 
GeneralCheck out this article, it's an alternative. The approach is a litter different, but very simple. Plus, expand collapse is in client side. Pin
Rajib Ahmed16-Sep-07 18:13
memberRajib Ahmed16-Sep-07 18:13 
GeneralDataGrid : add an event Pin
Member 11557971-Dec-04 11:09
memberMember 11557971-Dec-04 11:09 
QuestionCan anyone provide this example using VB.NET ?? Pin
welshTerrier222-Apr-04 11:42
memberwelshTerrier222-Apr-04 11:42 
GeneralItemCommand don't fire Pin
tix12-Jun-03 3:49
membertix12-Jun-03 3:49 
GeneralRe: ItemCommand don't fire Pin
xicoloko15-Jun-03 21:42
memberxicoloko15-Jun-03 21:42 
GeneralRe: ItemCommand don't fire Pin
Anonymous1-Apr-04 6:55
memberAnonymous1-Apr-04 6:55 
GeneralHere is a simple approach Pin
Softomatix11-Jun-03 8:51
memberSoftomatix11-Jun-03 8:51 
GeneralRe: Here is a simple approach Pin
Benjamin Mayrargue28-May-04 6:22
memberBenjamin Mayrargue28-May-04 6:22 
QuestionWhat about Win Forms? Pin
A.Wegierski12-May-03 20:56
memberA.Wegierski12-May-03 20:56 
AnswerRe: What about Win Forms? Pin
xicoloko12-May-03 21:31
memberxicoloko12-May-03 21:31 
GeneralRe: What about Win Forms? Pin
A.Wegierski12-May-03 21:53
memberA.Wegierski12-May-03 21:53 
GeneralMaster details relation ship. Pin
Anonymous3-Nov-04 10:27
memberAnonymous3-Nov-04 10:27 
GeneralMaster details relation ship. Pin
Member 8704353-Nov-04 10:37
memberMember 8704353-Nov-04 10:37 
AnswerRe: What about Win Forms? Pin
guidohatzis13-May-03 6:21
memberguidohatzis13-May-03 6:21 

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.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web05-2016 | 2.8.181116.1 | Last Updated 8 May 2003
Article Copyright 2003 by xicoloko
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid