Having a Repeater As a DataGrid Column

Introduction

DataGrid gives a richer UI presentation for web applications. Most of the time we are required to show one or more child data that belongs to the parent row in a column within the DataGrid. This article doesn't explain how to achieve hierarchal layout in a DataGrid. But, it gives the sample code for defining a Repeater control inside the template column and that Repeater binds to the child data of the parent row.

DataGrid HTML code

[Editor comment: Line breaks used to avoid scrolling.]

<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") %>'/> 
            </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 DataGrid control to the page and set its properties like the width, autogeneratecolumns, the events etc. as required. Then define the bound column and the DataField name for those columns. These columns will be displayed as text. If some data needs to be presented in special controls like the CheckBox as shown in the example, define it 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. The DataSource 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 bound

In this example, we are displaying a link button inside the Repeater and clicking on the link will take us to the appropriate page. This can be changed as per the need. To access the child table's field, this syntax is used: DataBinder.Eval(Container.DataItem, "[\"ColumnNameinChildTable\"]")%. The CommandArgument attribute used in the example is used to get the querystring to open up the page for the selected child link.

Conclusion

The code sample demonstrates how to display child data inside the column of a DataGrid in an efficient way with minimum amount of coding.