Presenting Child Data along with Parent Row in Data Grid

Introduction

Data Grid gives a richer UI presentation for the web applications. Most of the time there may be requirement to show one or more child data that belong to the parent row in a column with in the Data Grid. Though this article doesn't explain how to have hierarchal layout in the Data Grid itself. It gives the sample code for defining a Repeater control inside the Template Column and have that Repeater bind to the child data of the parent row.

Data Grid HTML Code:

<asp:datagrid id="dataGrid1" runat="server" Width="792px"
OnItemDataBound="dataGrid1_ItemDataBound" AutogenerateColumns="False"
cellpadding="0" PagerStyle-Mode="NumericPages" PagerStyle-PageButtonCount="20"
PageSize="20" AllowPaging="True"AllowSorting="True"
OnSortCommand="dgAccountBalance_Sort">

<Columns>

<!-- First Column With ID as hidden column -->

<asp:BoundColumn DataField="ID" Visible="False" HeaderText="ID">
<HeaderStyle Width="190px" HorizontalAlign="Center" ></HeaderStyle>
</asp:BoundColumn>

<!-- Second Column defined as Check Box in a Template Column -->

<asp:TemplateColumn HeaderText="Select" HeaderStyle-Width="40px" >
<ItemStyle Width="40px"></ItemStyle>
<ItemTemplate>
<input type="checkbox" runat="server" id="chkSelected"
checked ='<% # DataBinder.Eval(Container.DataItem, "Selected") %>' NAME="chkSelected"/>
</ItemTemplate>
</asp:TemplateColumn>

<!-- Third Column bound to the Field Description -->

<asp:BoundColumn DataField="Description" SortExpression="Description"
HeaderText="Description">
<HeaderStyle HorizontalAlign="Center"></HeaderStyle>
<ItemStyle Wrap="True" Width="2000px"></ItemStyle>
</asp:BoundColumn>

<!-- Fourth Column a Numeric column for displaying Currenty with DataFormat -->

<asp:BoundColumn DataField="Amount" SortExpression="Amount" ReadOnly="True"
HeaderText="Amount" DataFormatString="{0:$#,##0.0000;($#,##0.0000)}">
<HeaderStyle HorizontalAlign="Center" Width="70px"></HeaderStyle>
<ItemStyle HorizontalAlign="Right" Wrap="False"></ItemStyle>
</asp:BoundColumn>

<!-- Fifth Column That displays the child record of the row inside a Repeater control -->

<asp:TemplateColumn HeaderText="Child Data" HeaderStyle-HorizontalAlign="Center">
<ItemStyle HorizontalAlign="Left" Wrap="True"></ItemStyle>
<ItemTemplate>
<asp:Repeater ID="rptChild" OnItemDataBound = "rptChild_ItemDataBound" runat = "server"
DataSource = '<%# ((System.Data.DataRowView)Container.DataItem).Row.GetChildRows("relationParentChild") %>'>
<ItemTemplate>
<asp:LinkButton ID="linkChild" Runat="server"
CommandArgument=<%# DataBinder.Eval(Container.DataItem, "[\"ChildID\"]")%>
OnClick="linkChild_Click">
<%# DataBinder.Eval(Container.DataItem, "[\"ChildFieldNameToDisplay\"]")%>
</asp:LinkButton>
</ItemTemplate>
</asp:Repeater>
</ItemTemplate>
</asp:TemplateColumn>

</Columns>

<PagerStyle PageButtonCount="20" Mode="NumericPages"></PagerStyle>
</asp:datagrid> 

Code Required in the Code Behind Page:

private void Page_Load(object sender, System.EventArgs e)
{
System.Data.DataSet ds = Get Data Set();
// This Data Set should be populated with two tables one for the Parent Row Data
// and the second for the child data to be displayed in the repeater control
ds.Relations.Add("relationParentChild",ds.Tables[0].Columns["ID"],ds.Tables[1].Columns["FKID"]);
DataView dv = ds.Tables[0].DefaultView;
dataGrid1.DataSource = dv;
}

Code Explanation:

Add the data grid control to the page and set it's properties like width,autogeneratecolumns, the events etc, as required. Then define the Bound Column and the DataField Name for those columns. These columns will be just displayed as Text. If some data needs to be presented in special controls like the Check Box as shown in the example have it defined in the Item Template Column. The code also shows how we can set the Data Format String for the column.

The Repeater should be declared inside the Item Template column in the grid.(inside a Item Template). The data source for the Repeater is set as ((System.Data.DataRowView)Container.DataItem).Row.GetChildRows("relationParentChild") inside the Server Tag. This will get the child rows of the row to which the Data is being Bound

In this example we are displaying a link button inside the Repeater and clicking on the link will take to appropriate page as required. This can be changed to as per the need. To access the child table's field this syntax is used DataBinder.Eval(Container.DataItem, "[\"ColumnNameinChildTable\"]")%

CommandArgument attribute used in the example is used to get the querystring to open up the page for the selected child link.

The code sample demonstrates how to display the child data inside the column of a Data Grid with minimum and efficient way of coding.