Grid Inside a Grid - Nested Grids in C#

• Download source code - 13.8 KB

Introduction

This code snippet will help create a nested grid. A sub-grid depends on each row element in a parent grid control.

Background

I had a requirement to load all the accounts of an enrolled user in a grid control for a financial project. Some of the accounts had sub accounts which had to be loaded/ shown as a sub element to that account. Even though several sites gives an idea of how to create sub grids, none of them were prefect.

Using the code

The code contains two simple grid controls which have been used in a tricky way as to shown one as a sub grid.

Here is the ASPX code:

<table>
    <tr>
     <td>
      <asp:DataGrid id="ctlGrdLoanAccount" runat="server" 
              AutoGenerateColumns="False" BorderColor="#CC9966"
              BorderStyle="None" BorderWidth="1px" 
              BackColor="White" CellPadding="4">
       <FooterStyle ForeColor="#330099" BackColor="#FFFFCC"></FooterStyle>
       <SelectedItemStyle Font-Bold="True" ForeColor="#663399" BackColor="#FFCC66">
    </SelectedItemStyle>
       <ItemStyle ForeColor="#330099" BackColor="White"></ItemStyle>
       <HeaderStyle Font-Bold="True" ForeColor="#FFFFCC" BackColor="#990000">
    </HeaderStyle>
       <Columns>
        <asp:BoundColumn DataField="Account" HeaderText="Accounts">
         <HeaderStyle HorizontalAlign="Left"></HeaderStyle>
         <ItemStyle HorizontalAlign="Left" Width="120px"></ItemStyle>
        </asp:BoundColumn>
        <asp:BoundColumn DataField="InterestYTD" 
              HeaderText="InterestYTD" DataFormatString="{0:F2}%">
         <HeaderStyle HorizontalAlign="Left"></HeaderStyle>
         <ItemStyle HorizontalAlign="Left" Width="120px"></ItemStyle>
        </asp:BoundColumn>
        <asp:BoundColumn DataField="MaturityDate" 
              HeaderText="MaturityDate" DataFormatString="{0:d}">
         <HeaderStyle HorizontalAlign="Left" Width="100px"></HeaderStyle>
         <ItemStyle HorizontalAlign="Left"></ItemStyle>
        </asp:BoundColumn>
        <asp:BoundColumn DataField="PaymentAmount" 
             HeaderText="PaymentAmount" DataFormatString="{0:C2}">
         <HeaderStyle HorizontalAlign="Left" Width="100px"></HeaderStyle>
         <ItemStyle HorizontalAlign="Left"></ItemStyle>
        </asp:BoundColumn>
        <asp:BoundColumn DataField="CurrentBalance" 
             HeaderText="CurrentBalance" DataFormatString="{0:C2}">
         <HeaderStyle HorizontalAlign="Left" Width="100px"></HeaderStyle>
         <ItemStyle HorizontalAlign="Left"></ItemStyle>
        </asp:BoundColumn>
        <asp:TemplateColumn>
         <ItemTemplate>
     </td>
    </tr>
    <tr>
     <td colspan="6" align="center">
      <asp:datagrid id="ctlGrdSubAccount" Visible="false" runat="server" 
         EnableViewState="False" AutoGenerateColumns="False"
         BorderColor="#CC9966" BorderStyle="None" 
         BorderWidth="1px" BackColor="White" 
         CellPadding="4">
       <FooterStyle ForeColor="#330099" BackColor="#FFFFCC"></FooterStyle>
       <SelectedItemStyle Font-Bold="True" ForeColor="#663399" BackColor="#FFCC66">
    </SelectedItemStyle>
       <ItemStyle ForeColor="#330099" BackColor="White"></ItemStyle>
       <HeaderStyle Font-Bold="True" ForeColor="#FFFFCC" BackColor="#990000">
    </HeaderStyle>
       <Columns>
        <asp:BoundColumn DataField="SubAccount" HeaderText="SubAccount">
         <ItemStyle HorizontalAlign="Left" Width="200px"></ItemStyle>
         <HeaderStyle HorizontalAlign="Left"></HeaderStyle>
        </asp:BoundColumn>
        <asp:BoundColumn DataField="Balance" 
               HeaderText="Balance" DataFormatString="{0:C2}">
         <ItemStyle HorizontalAlign="Left" Width="50px"></ItemStyle>
         <HeaderStyle HorizontalAlign="Left"></HeaderStyle>
        </asp:BoundColumn>
        <asp:BoundColumn DataField="APR" HeaderText="APR" 
                 DataFormatString="{0:F2}%">
         <ItemStyle HorizontalAlign="Left" Width="50px"></ItemStyle>
         <HeaderStyle HorizontalAlign="Left"></HeaderStyle>
        </asp:BoundColumn>
        <asp:BoundColumn DataField="PayOffAmount" HeaderText="PayOffAmount" 
            DataFormatString="{0:C2}">
         <ItemStyle HorizontalAlign="Left" Width="100px"></ItemStyle>
         <HeaderStyle HorizontalAlign="Left"></HeaderStyle>
        </asp:BoundColumn>
       </Columns>
      </asp:datagrid>
      </ItemTemplate> </asp:TemplateColumn> </Columns> </asp:DataGrid></td>
    </tr>
</table>

Here is the C# code:

private void ctlGrdLoanAccount_ItemDataBound(object sender, 
        System.Web.UI.WebControls.DataGridItemEventArgs args)
{
    if (args.Item != null) 
    { 
        object [] rowArray = new object[3];
        DataGrid g = (DataGrid) sender;
        DataTable table = g.DataSource as DataTable;
        if (args.Item.ItemIndex != -1) 
        {
            DataRow datarow = table.Rows[args.Item.ItemIndex];
            rowArray = datarow.ItemArray;
            //Check for the sub Accounts 
            if (dsAccount.Tables.Contains("33333")) 
            {
                ctlGrdSubAccount  = (DataGrid)args.Item.FindControl("ctlGrdSubAccount")  
                as DataGrid;
                ctlGrdSubAccount.Visible = true;
                ctlGrdSubAccount.DataSource = dsAccount.Tables["33333"];
                ctlGrdSubAccount.DataBind();
            }
        }
    } 
}

private void ctlGrdLoanAccount_ItemCreated(object sender, 
    System.Web.UI.WebControls.DataGridItemEventArgs args)
{
    args.Item.Cells[4].Style.Add("BORDER-RIGHT-STYLE", "none");   
    args.Item.Cells[5].Style.Add("BORDER-TOP-STYLE", "none");
    // args.Item.Cells[5].Style.Add("BORDER-RIGHT-STYLE", "none");
    args.Item.Cells[5].Style.Add("BORDER-LEFT-STYLE", "none");
}

History

• Initial draft: 15-Mar-2008.