Hierarchical GridView in ASP.NET

Tweet

Today I am going to post on how to show GridViews on Hierarchical style. In some time, we required to show the records in Master – Details structure where the master information will show initially and the detail information will show on demand for a particular master detail.

In the below implementation, I am going the take the following requirement to implement.

1. In a page by default list of Orders will show with + icon on each row.
2. By clicking + icons on a row, the Order Detail grid will show about the particular master detail just below the row.
3. Once the detail information is visible, the + icon must be changed to – icon to make the detail invisible.
4. On click of – icon, the detail grid will be invisible.

In this example I am using NorthWind sql server database for example purpose. So to test this example code, please make sure to have NorthWind database setup done with your database server.

The implementation follows:

As I have two type of GridView which will show entirely different columns, I have to fetch two records set results. So I am creating a store procedure which will return two select query result.

CREATE PROC [OrderDetails]
AS
SELECT Orders.OrderID,
  Orders.CustomerID,
  Orders.ShippedDate,
  Orders.ShipName,
  Orders.ShipCountry,
  Orders.ShipCity
FROM Orders
SELECT OrderDetails.OrderID,
  OrderDetails.ProductID,
  Products.ProductName,
  OrderDetails.UnitPrice,
  OrderDetails.Quantity,
  OrderDetails.Discount,
  ((OrderDetails.UnitPrice * OrderDetails.Quantity) - OrderDetails.Discount) Amount
FROM [Order Details] OrderDetails
JOIN Products ON Products.ProductID = OrderDetails.ProductID

When I get the result to the DataSet, I will get records two tables in separate Table index. So the DataSet.Table[0] provides Order information and DatSet.Table[1] will provide Order Details information.

Below is the GridView Script which contains one more GridView inside of a column.

<asp:GridView id="GridViewHierachical" runat="server" AutoGenerateColumns="False"
    Width="100%" CellPadding="0" CellSpacing="2" GridLines="Vertical" DataKeyNames="OrderId" AllowPaging="true"
    BackColor="White" BorderWidth="1px" BorderStyle="Solid" BorderColor="Black" PageSize="20" style="border-right:none;"
    OnPageIndexChanging="GridViewHierachical_PageIndexChanging"
    OnRowDataBound="GridViewHierachical_RowDataBound">
    <Columns>
        <asp:TemplateField HeaderText="Order ID">
            <ItemStyle Width="10%" />
            <ItemTemplate>
                <a href="javascript:ExpandCollapse('div<%# Eval("OrderID") %>');" style="padding-left:2px;">
                    <img id="imgdiv<%# Eval("OrderID") %>" alt=""  width="9px" border="0" src="images/plus.gif"/>
                </a>                    
                <asp:Label ID="lblOrderID" Text='<%# Eval("OrderID") %>' Visible="true" runat="server"></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="CustomerID" HeaderText="Customer ID">
            <ItemStyle Width="10%" />
        </asp:BoundField>
        <asp:BoundField DataField="ShippedDate" HeaderText="Shipped Date"  DataFormatString="{0:MMMM d, yyyy}">
            <ItemStyle Width="20%" />
        </asp:BoundField>
        <asp:BoundField DataField="ShipName" HeaderText="Ship Name">
            <ItemStyle Width="20%" />
        </asp:BoundField>
        <asp:BoundField DataField="ShipCountry" HeaderText="Ship Country">
            <ItemStyle Width="15%" />
        </asp:BoundField>
        <asp:BoundField DataField="ShipCity" HeaderText="Ship City">
            <ItemStyle Width="15%" />
        </asp:BoundField>
        <asp:TemplateField>
            <HeaderStyle CssClass="InvisibleCol" />
            <ItemStyle CssClass="InvisibleCol" />                                                        
            <ItemTemplate>
            </td></tr>
                <tr>
                    <td colspan="6">
                        <div id="div<%# Eval("OrderID") %>" style="display:none;position:relative;left:10px;overflow:auto;width:99%;">
                            <asp:GridView id="GridViewDetails" runat="server" 
                                AllowSorting="false" AutoGenerateColumns="False" Width="100%"
                                CellSpacing="1" CellPadding="0" GridLines="Both" DataKeyNames="OrderId"
                                BackColor="White" BorderWidth="2px" BorderStyle="Ridge"
                                BorderColor="White" AllowPaging="false" ForeColor="#000066">
                                <Columns>
                                    <asp:BoundField DataField="OrderId" HeaderText="Order ID">
                                        <ItemStyle Width="10%" />
                                    </asp:BoundField>
                                    <asp:BoundField DataField="ProductName" HeaderText="Product Name">
                                        <ItemStyle Width="30%" />
                                    </asp:BoundField>
                                    <asp:BoundField DataField="UnitPrice" HeaderText="Unit Price" DataFormatString="{0:N}" ItemStyle-HorizontalAlign="Right">
                                        <ItemStyle Width="15%" />
                                    </asp:BoundField>
                                    <asp:BoundField DataField="Quantity" HeaderText="Quantity" DataFormatString="{0:N}" ItemStyle-HorizontalAlign="Right">
                                        <ItemStyle Width="15%" />
                                    </asp:BoundField>
                                    <asp:BoundField DataField="Discount" HeaderText="Discount" DataFormatString="{0:N}" ItemStyle-HorizontalAlign="Right">
                                        <ItemStyle Width="15%" />
                                    </asp:BoundField>
                                    <asp:BoundField DataField="Amount" HeaderText="Amount" DataFormatString="{0:N}" ItemStyle-HorizontalAlign="Right">
                                        <ItemStyle Width="15%" />
                                    </asp:BoundField>
                                </Columns>
                                <RowStyle ForeColor="#000066" Height="20px"></RowStyle>
                                <SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White"></SelectedRowStyle>
                                <PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left"></PagerStyle>
                                <HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White"></HeaderStyle>
                                <AlternatingRowStyle BorderStyle="Solid" BorderWidth="0px"></AlternatingRowStyle>
                            </asp:GridView>
                        </div>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <FooterStyle BackColor="#CCCCCC" ForeColor="Black"></FooterStyle>
    <RowStyle BackColor="#EEEEEE" ForeColor="Black" Height="22px"></RowStyle>
    <HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" Height="22px"></HeaderStyle>
    <SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White"></SelectedRowStyle>
    <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Right"></PagerStyle>
    <AlternatingRowStyle BorderStyle="Solid" BorderWidth="0px" BackColor="#DCDCDC"></AlternatingRowStyle>
</asp:GridView>

If you note correctly the script, the TemplateField of the last column contains script to complete the column and complete the current row by using </td></tr>. So once the Ship City column completed and when last column rendering, the column will end by our script and start a new row. In the new row, the Child GridView will be rendered.

Below is C# code.

private DataSet dsOrderDetails = null;
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindGrid();
    }
}
private void BindGrid()
{
    using (SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["SQLConnection"].ConnectionString))
    {
        SqlCommand command = new SqlCommand("OrderDetails", connection);
        command.CommandType = CommandType.StoredProcedure;

        SqlDataAdapter dataAdapter = new SqlDataAdapter(command);
        connection.Open();

        dsOrderDetails = new DataSet();
        dataAdapter.Fill(dsOrderDetails);

        GridViewHierachical.DataSource = dsOrderDetails.Tables[0];
        GridViewHierachical.DataBind();
    }
}

protected void GridViewHierachical_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    GridViewHierachical.PageIndex = e.NewPageIndex;
    BindGrid();
}

protected void GridViewHierachical_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // Additional check for the row is not header or footer
        if (e.Row.DataItem == null) return;

        // Getting the GridViewDetails child grid
        GridView GridViewDetails = (GridView)e.Row.FindControl("GridViewDetails");

        // Getting the Order ID
        Label lblOrderID = (Label)e.Row.FindControl("lblOrderID");

        // Filtering the records in the second table records. The second table in the dataset contains list of order details for all orders.
        dsOrderDetails.Tables[1].DefaultView.RowFilter = "OrderID=" + lblOrderID.Text; // Normal SQL Where condition only
        GridViewDetails.DataSource = dsOrderDetails.Tables[1].DefaultView;
        GridViewDetails.DataBind();
    }
}

Below is VB code:

Private dsOrderDetails As DataSet = Nothing
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            BindGrid()
        End If
    End Sub
    Private Sub BindGrid()
        Using connection As New SqlConnection(ConfigurationManager.ConnectionStrings("SQLConnection").ConnectionString)
            Dim command As New SqlCommand("OrderDetails", connection)
            command.CommandType = CommandType.StoredProcedure

            Dim dataAdapter As New SqlDataAdapter(command)
            connection.Open()

            dsOrderDetails = New DataSet()
            dataAdapter.Fill(dsOrderDetails)

            GridViewHierachical.DataSource = dsOrderDetails.Tables(0)
            GridViewHierachical.DataBind()
        End Using
    End Sub

    Protected Sub GridViewHierachical_PageIndexChanging(ByVal sender As Object, ByVal e As GridViewPageEventArgs)
        GridViewHierachical.PageIndex = e.NewPageIndex
        BindGrid()
    End Sub

    Protected Sub GridViewHierachical_RowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
        If e.Row.RowType = DataControlRowType.DataRow Then
            ' Additional check for the row is not header or footer
            If e.Row.DataItem Is Nothing Then
                Return
            End If

            ' Getting the GridViewDetails child grid
            Dim GridViewDetails As GridView = DirectCast(e.Row.FindControl("GridViewDetails"), GridView)

            ' Getting the Order ID
            Dim lblOrderID As Label = DirectCast(e.Row.FindControl("lblOrderID"), Label)

            ' Filtering the records in the second table records. The second table in the dataset contains list of order details for all orders.
            dsOrderDetails.Tables(1).DefaultView.RowFilter = "OrderID=" + lblOrderID.Text
            ' Normal SQL Where condition only
            GridViewDetails.DataSource = dsOrderDetails.Tables(1).DefaultView
            GridViewDetails.DataBind()
        End If
    End Sub

In the RowDataBound event, we are getting the Child GridView (GridViewDetails) and assigning the records to the GridView programmatically and calling DataBind Method. Before calling DataBind, the records are filtered by RowFilter of dataset table and assigning to the GridView. I also declared dsOrderDetails variable in Page level scope as I required the second table resultsets in the RowDataBound event.

I have a Javascript, which is used to Expand and Collapse the Child grid by clicking the +/- icons on the row.

function ExpandCollapse(obj) {
    var div = document.getElementById(obj);
    var img = document.getElementById('img' + obj);

    if (div) {
        if (div.style.display == "none") {
            div.style.display = "block";
            img.src = "images/minus.gif";

        }
        else {
            div.style.display = "none";
            img.src = "images/plus.gif";
        }
    }
}

I also used a CSS class for hiding the last TemplateField column which hold the Child Grid.

.InvisibleCol
{
    display:none;
}

This code has been tested with IE 6.0/9.0, Firefox 3.6, Opera 11.01

Below is the output of the screen,

Initial Page (with +, - buttons)

Page with Hierarchical structure

download the working example of the source code in C# here and in VB here

[Update]
I have blogged another post on the same topic using AJAX and JQuery concepts. Below are the links

Hierarchical GridView in ASP.NET with AJAX, Javascript implementation
Hierarchical GridView in ASP.NET with AJAX, JQuery implementation - Part 1
Hierarchical GridView in ASP.NET with AJAX, JQuery implementation - Part 2