Nested GridViews in C#.NET: How to display relational data together


June 25, 2009 By

Joanna Smith

First, you must understand the purpose of a GridView in the .NET framework.  A GridView control displays rows of data in a table like structure.  It displays one record from the table per grid row.  This article explains how you can extend the functionality of this powerful control so that relational tables can be displayed together.
This article shows you how to accomplish such a task. 
 
One reason to nest GridViews in .NET would be to display data in a one-to-many relationship.  In some cases there is detail data that has a parent-child relationship to other data in the database.  One time consuming way to display this data and its related data could be to loop through the categories (one hit to the database) and write the html manually in a literal control.  Then for each category, loop through the details under that category (several hits to the database) and write the html manually in the same literal control.  That’s a lot of hits to the database and a lot of manual coding. 
 
A shortcut to this manual coding and less hits to the database would be to create nested GridViews.  First, create an .ascx (web control).  You may need to separate the control in a sub folder, as controls and pages often do not coexist in the same folder.  This control will house the detail data.  Create a public property of the parent ID to this detail data, for example “Category ID”. 


    private string _categoryID = "0";

    public string CategoryID

    {

        set { _categoryID = value; }

        get { return _categoryID; }

    }



On the page load event, grab the data table for the detail records filtering the data by the parent ID (“categoryID”).  Bind that DataTable to the GridView in the control.


    protected void Page_Load(object sender, EventArgs e)

    {

            Documents.Document objDA = new Documents.Document();

            objDA.searchCategory = CategoryID;

            DataTable dt = objDA.getChildren();

            if (dt.Rows.Count > 0)

            {

                grdChild.DataSource = dt;

                grdChild.DataBind();

            }

    }


Next, create a page with another GridView.  Inside the GridView, create one column with a template field.  Within the template field, create a label and bind the text field to the category name from the DataTable.  Drag the control you created above onto this page.  Place the user control below the label.  Add an attribute to the user control to the public property “CategoryID” and bind it to the ID from the DataTable.  See <uc1:grid> below.

 

<%@ Register Src="controls/grid.ascx" TagName="grid" TagPrefix="uc1" %>

    <asp:GridView runat="server" ID="grdParent" AutoGenerateColumns="False" >

         <Columns>

         <asp:TemplateField>

         <ItemTemplate>

         <asp:Label ID="lblCat" runat="server" Text='<%# Eval("categoryName") %>'></asp:Label>

         <br />

         <uc1:grid ID="ucGrid" runat="server" CategoryID='<%# Eval("categoryID") %>' />                   

         <br />

         </ItemTemplate>

         </asp:TemplateField>

         </Columns>

    </asp:GridView>

 

On the page load event, grab the DataTable of the parent data. 


    protected void Page_Load(object sender, EventArgs e)

    {

            Documents.Category objDA = new Documents.Category();

            grdParent.DataSource = objDA.getCategories ();

            grdParent.DataBind();

    }


Just like adding a user control to a page, you see a GridView within another GridView. 

Did you like this post?

Sign up for our Tips and Trends list and we'll let you know each week when we have a new one.

12 Ways to Get Your Business Growing Again

Categories

Web Design (15)
Web Development (20)
Misc. Website (18)
Search Engine Optimization (76)
Social Media Marketing (80)
Local Search Marketing (14)
Content Marketing (15)
PPC Advertising (14)
Digital Marketing (79)
Marketing Automation (10)
Sales Automation (8)
Company News (10)
Other (11)

Archives

Feeds




Related Posts


Comments:

Response to: Nested GridViews in C#.NET: How to display relational data together
Friday, August 14, 2009
Peter Moos says:

In my case this was not functional because, the Page_Load event of the user control was fired before the property was set. My Solution was to put the DataBinding of the nested grid into the nested grind GridView_DataBinding event.

Response to: Nested GridViews in C#.NET: How to display relational data together
Monday, September 21, 2009
Joanna Smith says:

If you load the datasource of the parent data, that will trigger the load event of the control. If you use the code above, the categoryID is set before the control is loaded. If the control is outside of the parent grid, yes, the control load event will be fired before the categoryID is assigned. I am sorry that this solution didn't work for you.

Get in touch
with us
Submit
... or call us at 407.682.2222
Sales & Marketing Technologies
© Copyright 2018 Sales & Marketing Technologies, Ltd. All rights reserved.