In this tutorial I am showing Categories and Products tables from Northwind database. I hope you also have Northwind sample database available to you otherwise download it from the Microsoft website.
Following code shows the HTML markup of GridView control on the page. Notice how I am using TemplateField column to add a Label and a nested GridView view control inside the MainGridView control. TemplateField column provides you option to add any number of ASP.NET controls inside GridView in one of its Template. For this tutorial I am using ItemTemplate as I want to show InnerGridView for all the items in the MainGridView.
<asp:GridView
ID="MainGridView" runat="server" AutoGenerateColumns="False"CellPadding="6" Width="50%" Font-Names="Arial" GridLines="None" BorderColor="#000000"
BorderStyle="Solid" BorderWidth="1px">
<Columns>
<asp:TemplateField HeaderText="Categories and Products">
<ItemTemplate>
<asp:Label runat="server" ID="lblCategoryName" Text='<%# Eval("CategoryName") %>'
Font-Bold="True" Font-Size="12pt" />
<asp:GridView ID="InnerGridView" runat="server" CellPadding="4" Width="100%"
DataSource='<%# GetProductsByCategory(Eval("CategoryID").ToString()) %>'
BorderStyle="Solid" BorderWidth="1px" Font-Size="8pt"
BorderColor="#336699" GridLines="Horizontal">
<HeaderStyle BackColor="#336699" Font-Bold="True" ForeColor="White" />
</asp:GridView>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle BackColor="#000000" Font-Bold="True" ForeColor="White" Font-Size="10pt" />
</asp:GridView>
The most important line in the above code is where I am setting the DataSource property of the nested GridView control using ASP.NET binding expression. In the expression I am calling a custom method GetProductsByCategory which takes category id as its only parameter from the main GridView control and return the products DataTable to inner GridView control. In some online articles you will also see people using RowDataBound event of the MainGridView control to achieve the similar functionality but I have found this technique easier to implement.
Following is the C# code of the page. In the Page_Load event I am simply loading and binding categories with the MainGridView control. You will find code in GetProductsByCategory very similar to LoadCategories with only one difference that it fetches Products from Northwind database which are only available in a particular category.
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
LoadCategories();
}
}
private void LoadCategories()
{
string constr = @"Server=TestServer;Database=NORTHWND;uid=test; pwd=test;";
string query = "SELECT TOP 3 CategoryID, CategoryName FROM Categories";
SqlDataAdapter da = new SqlDataAdapter(query, constr);
DataTable table = new DataTable();
da.Fill(table);
MainGridView.DataSource = table;
MainGridView.DataBind();
}
public DataTable GetProductsByCategory(string categoryId)
{
string constr = @"Server=TestServer;Database=NORTHWND;uid=test; pwd=test;";
string query = "SELECT Top 3 ProductID, ProductName, UnitPrice FROM Products WHERE CategoryID = " + categoryId;
SqlDataAdapter da = new SqlDataAdapter(query, constr);
DataTable table = new DataTable();
da.Fill(table);
return table;
}
