Multi Level DataGrid

Emil Indradjaja MCP, May 27th 2005 http://www.i-sources.net/?view=blog&blog_id=355647310

During my experiences building .NET with datagrid, sometimes I need to create a multi-level DataGrid for easy viewing and access.

To accomplish that I'd do the following step:

  1. Build a Parent Data Grid.

    The following code shows a simple DataGrid that shows Region from Nortwind Database.

    private void Page_Load(object sender, System.EventArgs e){ if (!Page.IsPostBack) { this.FillDataStore(); this.DrawParentGrid(); }
    }
    private void FillDataStore(){ MyDataSet = new DataSet();
    string sql="select * from Region order by regionDescription"; SqlDataAdapter da = new SqlDataAdapter(sql, this.sqlConnection1); da.Fill (MyDataSet, "REGION"); sql = "select * from Employees"; SqlDataAdapter da1 = new SqlDataAdapter(sql, this.sqlConnection1); da.Fill(MyDataSet, "EMPLOYEES");}

    private void DrawParentGrid(){ DataView dv = new DataView(MyDataSet.Tables[0]); this.dgRegion.DataSource=dv; this.dgRegion.DataBind();
    }

    The code simply fill the MyDataSet with content from Region and Employees table and populate the DataSet into dgRegion during the 1st execution time of the page. The above code produces the following output:

    1-1
    For the sake of this article, we are going to add DataGrid for the employee (so called dgEmp) inside the item template of dgRegion as shown below:

    <asp:datagrid id="dgRegion" runat="server" BorderColor="silver" Font-Size="XX-Small" AutoGenerateColumns="False"
    Font-Names="Verdana" CellPadding="2" GridLines="Horizontal" HorizontalAlign="Center" BackColor="White"
    Width="100%">

    <AlternatingItemStyle BackColor="#FFFF80"></AlternatingItemStyle>
    <HeaderStyle Font-Bold="True" BackColor="WhiteSmoke"></HeaderStyle>
    <Columns>
    <asp:TemplateColumn HeaderText="Region ID">
    <HeaderStyle Width="100px"></HeaderStyle>
    <ItemTemplate>
    <asp:Label id=inpRegionId runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.RegionId") %>' Visible="True">
    </asp:Label>
    </ItemTemplate>
    <ItemStyle VerticalAlign=Top></ItemStyle>
    </asp:TemplateColumn>
    ...
    ...
    <asp:TemplateColumn HeaderText="Other">
    <HeaderStyle Width="130px"></HeaderStyle>
    <ItemTemplate>
    <asp:datagrid id="dgEmp" runat="server" BorderColor="silver" Font-Size="XX-Small" AutoGenerateColumns="False"
    Font-Names="Verdana" CellPadding="2" GridLines="Horizontal" HorizontalAlign="Center" BackColor=#ffffcc
    Width="100%" Visible=False>
    <AlternatingItemStyle BackColor=#ffffcc></AlternatingItemStyle>
    <HeaderStyle Font-Bold="True" BackColor="WhiteSmoke"></HeaderStyle>
    <Columns>
    <asp:TemplateColumn HeaderText="Employee Statistic">
    <HeaderTemplate>
    <table width=100%>
    <tr>
    <td width=150 align=center>Employee Name</td>
    <td width=100 align=center>Total Sales</td>
    </tr>
    </table>
    </HeaderTemplate>
    <ItemTemplate>
    <table width=100%>
    <tr>
    <td width=150>
    <asp:Label id="Label1" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.FirstName") + " " + DataBinder.Eval(Container, "DataItem.LastName") %>' Visible="True">
    </asp:Label>
    </td>
    <td width=100 align=right><asp:Label Visible=False id="lblEmployeeId" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.EmployeeID") %>'>
    </asp:Label>
    <asp:Label id="lblTotalCust" runat="server" Visible=True>
    </asp:Label>
    </td>
    </tr>
    </table>
    </ItemTemplate>
    </asp:TemplateColumn>
    </Columns>
    </asp:datagrid>
    </ItemTemplate>
    </asp:TemplateColumn>
    ...
    <asp:TemplateColumn>
    <HeaderStyle Width="100px"></HeaderStyle>
    <ItemStyle VerticalAlign=Top></ItemStyle>
    <ItemTemplate>
    <asp:LinkButton id="Linkbutton1" runat="server" Text="View Employees" CausesValidation="false" CommandName="Select">View Employees</asp:LinkButton>
    </ItemTemplate>
    </asp:TemplateColumn>
    </Columns>
    </asp:datagrid>

  2. Wire the parent and child event.

    To make it work, we need to make few changes in the code behind of the page.

    First, we need to wire to event for the parent datagrid as shown below:

    1-3-1

    We will wire the parent DataGrid for the ItemCreated event and ItemDataBound event.

    1-3

    Inside the ItemCreated event of the parent datagrid, we find the dgEmp and add an ItemDataBound event to it. And, inside the ItemDataBound event of the parent datagrid, we find the the dgEmp and bind it to the dataview that corresponds to each employee.

  3. Add event in the child datagrid.

    The last thing to do is to add an event to the child datagrid as shown on the code below:

    1-4

    As you see, the function above just get the employee id and calculate the total sales from the ORDER table inside the Northwind database. The result of the code is shown below:

    1-5

    Happy Programming!

 

Share this article!

Follow us!

Find more helpful articles: