Grid Inside a Grid - Nested Grid in C#

• Download NestedGridCtrl - 17.41 KB

Introduction

This code snippet will help to create a Nested Grid. The sub grid depends on the each row element in the parent grid control

Background

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

Using the code

The code contains to simple grid controls which has been used in a tricky way to show like a sub grid.

This is the 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>




 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");
   
  }

Histroy

Intital Draft : 15-03-2009