Click here to Skip to main content
Click here to Skip to main content

Having a Repeater As a DataGrid Column

, 9 Nov 2005
Rate this:
Please Sign up or sign in to vote.
This article shows the code for binding one or more columns in a DataGrid row with child data.

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Ezhilan Muniswaran
Web Developer
United States United States
Ezhilan Muniswaran has more than twelve years of experience in Software development mostly in Microsoft Technologies.
MCSD in .NET and Visual Studio 6.0

Comments and Discussions

 
QuestionHow did you think? PinmemberKarthikkeyan V.20-Aug-07 3:03 
QuestionDatagrid in Datagrid. PinmemberKarthikkeyan V.20-Aug-07 2:59 
GeneralGood Article Pinmembervishwas20-Nov-05 14:05 
GeneralNice article Pinmemberdotnetpal14-Nov-05 11:57 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.141022.2 | Last Updated 9 Nov 2005
Article Copyright 2005 by Ezhilan Muniswaran
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid