I had to implement a Master-Detail GridView in my application. Searching the net, I did find a lot of solutions, but couldn’t find one where the child table was positioned properly. Well, there might be other solutions that give the same result, but I thought sharing this might help others.
I’ve extended the
SearchGridView (the last article I posted) and created a
NestableGridView class. I overrode the
RenderContents function to render the child table in a separate row.
I’ve extended the
SearchGridView control as a
public class NestableGridView : SearchGridView
I’ve overrode the
RenderContents function to identify the cell where the child table is and to render it in a separate row.
protected override void RenderContents(HtmlTextWriter writer)
if (DesignMode || Rows.Count == 0)
if(HeaderRow != null)
foreach (GridViewRow row in Rows)
Control childCtl = row.FindControl(ChildTableID);
if (childCtl != null && childCtl.Visible)
TableCell childCell = null;
foreach (TableCell cell in row.Cells)
if (cell.Controls.IndexOf(childCtl) == -1)
childCell = cell;
if(childCell != null)
childCell.ColumnSpan = row.Cells.Count;
if (FooterRow != null)
if (PagerRow != null)
SelectedIndexChanging event handles the toggling visibility of the child table.
protected override void OnSelectedIndexChanging(GridViewSelectEventArgs e)
if (Rows[e.NewSelectedIndex] != null &&
Rows[e.NewSelectedIndex].FindControl(ChildTableID) != null)
Control childCtl = Rows[e.NewSelectedIndex].FindControl(ChildTableID);
if (childCtl != null)
childCtl.Visible = !childCtl.Visible;
Now, let me illustrate the above control with the help of an example. For this purpose, I have used the Categories and Products table from the NorthWind database.
- Step 1: Create a datasource
select query "SELECT * From Categories".
- Step 2 : Create an instance of
NestableGridView and customize the
SearchFilters property to have the list of columns on which the search can be performed.
- Step 3: Create a template column with a
SearchGridView with the datasource
dsChild and a hidden field
_hfChildSearch to hold the search string of the child table. Set the
Visibility of the
false to hide all child tables, or
true to show all tables initially.
- Step 4: Set the child table ID of the master grid as
pnlChild (the ID of the child table panel).
- Step 5: Implement the
SearchGrid event on the master and child tables to filter and search records.
- Step 6: Add empty data templates to the master and child tables to insert new records.
- Step 7: Implement the
AddRow event on the master and child tables to add new records to the tables.
NestableGridView can be used not only to display child tables but any control inside the master row, like pictures etc. Also, the alignment of the child row can be set using the