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.