Hierarchical GridView in ASP.NET with AJAX implementation

Tweet

This post concentrates on how to show GridView on Hierarchical style with AJAX implementation. I have already blogged one post related to the same concept without AJAX implementation. This post takes the same scenario and implementing the same concept using XML HTTP AJAX implementation.

The use case of the implementation follows:

1. The page should show a Grid View with list of Orders with Expand icon on the first column.
2. On click of expand icon on each row, the Order Details of the Order must be fetched from the database and show in the Grid View just below to the row with little adjacent to the first column.
3. The child Grid View must fetch from the server only on demand to avoid the loading time using AJAX concept.
4. Once the expand icon clicked, there should be a loading message to inform to the user the details are fetching from the server.
5. Once the Grid View fetched from the server, the Child Grid should show by hiding the loading message and the expand icon must be changed to collapse icon.
6. On click of collapse icon, the child grid should hide from the screen.
7. When the user clicks the Expand which was already trigged before (and Child Grid details fetched from the server) there should not be a call to the server again fetching the same details. The system should show the hidden Grid View.
8. When the user clicks expand icon before previous expand process completed, the previous process (or loading) must be suspended and the new process should start immediately. (To test this requirement, I coded a sleep statement in the program.)

To know how XML HTTP AJAX works and how to implement the same in ASP.NET page, you can have a look on the post How to implement XML HTTP AJAX in ASP.NET Web Pages.

I am using Northwind database in this example. So to test the code, please make sure you have Northwind database and update the server in connection string on web.config.

I have two aspx page to implement this sample.

1. Default.aspx – is the page end user accessing. This page contains the main grid which has the Order details. This page had XML HTTP AJAX implementation which calls another page ChildGridBuilder.aspx to get the child Grid View response.
2. ChildGridBuilder.aspx – is the page act as remote page. This page generates the Child Grid View response which contains the list of Order Details information. As the Grid View is depends on an Order Id, it accepts a Query String for OrderId information. So the Default.aspx page will call this page with the Order Id which is from the expanding row.

The implementation follows:

Default.aspx GridView Script

<asp:GridView id="GridViewHierachical" runat="server" AutoGenerateColumns="False"
    Width="100%" DataKeyNames="OrderId" AllowPaging="true" CssClass="GridViewStyle"
    BorderStyle="Solid" PageSize="10" CellPadding="0" CellSpacing="1"
    OnPageIndexChanging="GridViewHierachical_PageIndexChanging" EnableViewState="false">
    <Columns>
        <asp:TemplateField HeaderText="Order ID">
            <ItemStyle Width="10%" />
            <ItemTemplate>
                <input id='hid<%# Eval("OrderID") %>') value='0' type="hidden" />
                <img id="img<%# Eval("OrderID") %>" alt=""  width="9px" border="0" src="Images/plus.png" style="cursor:pointer;padding-left:3px;width:12px;height:12px;" onclick="javascript:GetChildGrid('<%# Eval("OrderID") %>');"/>
                <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 id="tr<%# Eval("OrderID") %>" style="display:none;">
                    <td colspan="6">
                        <div id="div<%# Eval("OrderID") %>" style="position:relative;left:10px;overflow:auto;width:99%;padding-bottom:1px;"></div>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <FooterStyle BackColor="#CCCCCC" ForeColor="Black"></FooterStyle>
    <RowStyle CssClass="GridViewRow" Height="22px"></RowStyle>
    <HeaderStyle CssClass="GridViewHeader" Height="22px"></HeaderStyle>
    <SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White"></SelectedRowStyle>
    <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Right"></PagerStyle>
    <AlternatingRowStyle CssClass="GridViewAlternativeRow"></AlternatingRowStyle>
</asp:GridView>

Default.aspx C# Code behind

protected void Page_Load(object sender, EventArgs e)
{
    BindGrid();
}
private void BindGrid()
{
    using (SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["SQLConnection"].ConnectionString))
    {
        SqlCommand command = new SqlCommand("SELECT Orders.OrderID, Orders.CustomerID, Orders.ShippedDate, Orders.ShipName, Orders.ShipCountry, Orders.ShipCity FROM Orders", connection);
        command.CommandType = CommandType.Text;

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

        DataSet 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();
}

Default.aspx Javascript Code

var is_ie = (navigator.userAgent.indexOf('MSIE') >= 0) ? 1 : 0;
var is_ie5 = (navigator.appVersion.indexOf("MSIE 5.5") != -1) ? 1 : 0;
var xmlHttp;

/* This function requests the HTTPRequest, will be used to render the Dynamic content html markup 
* and it will call HandleResponse to handle the response
*/
function GetChildGrid(Id) {
    
    // Get the Div
    var childRow = document.getElementById("tr" + Id);
    var img = document.getElementById('img' + Id);

    if (childRow) {

        // Is already ChildGrid shown. If not shown
        if (childRow.style.display == "none") {
        
            // If the Child Grid is not fetched, then go and fetch it.
            if (document.getElementById('hid' + Id).value == '0') {
            
                var url = 'ChildGridBuilder.aspx?ID=' + Id;
                xmlHttp = createAjaxObject();
                if (xmlHttp) {
                    xmlHttp.open('get', url, true);
                    xmlHttp.onreadystatechange = function() {
                        HandleResponse(Id);
                    }
                    xmlHttp.send(null);
                }
            }
            else {
                childRow.style.display = "block";
                img.src = "images/minus.png";
            }
        }
        else { // Already Child Grid Shown
            childRow.style.display = "none";
            img.src = "images/plus.png";
        }
    }
}
/* This function is used to handler the http response */
function HandleResponse(Id) {

    var childGridDiv = document.getElementById("div" + Id);
    var childRow = document.getElementById("tr" + Id);
    var img = document.getElementById('img' + Id);
    
    // If Response completed
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {

            // Here is the response
            var str = xmlHttp.responseText;

            childGridDiv.innerHTML = str;

            xmlHttp.abort();
            
            // Mark the flag, Child Grid is fetched from server
            document.getElementById('hid' + Id).value = '1';
        }
        else {
            childRow.style.display = "none";
            img.src = "images/plus.png";
        }
    }
    else {
        // Show the Progress status
        childGridDiv.innerHTML = "<div style='padding:4px;'><img src='Images/ajax-loader.gif' alt='' /><span style='color:blue;font-size:17px;font-weight:bold;'>Loading... Please wait</span></div>";
        childRow.style.display = "block";
        img.src = "images/minus.png";
    }
}
/* function to create Ajax object */
function createAjaxObject() {
    var ro;
    var browser = navigator.appName;
    if (browser == "Microsoft Internet Explorer") {
        if (xmlHttp != null) {
            xmlHttp.abort();
        }
        ro = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else {
        if (xmlHttp != null) {
            xmlHttp.abort();
        }
        ro = new XMLHttpRequest();
    }
    return ro;
}

/* Get the XML Http Object */
function GetXmlHttpObject(handler) {
    var objXmlHttp = null;
    if (is_ie) {
        var strObjName = (is_ie5) ? 'Microsoft.XMLHTTP' : 'Msxml2.XMLHTTP';

        try {
            objXmlHttp = new ActiveXObject(strObjName);
            objXmlHttp.onreadystatechange = handler;
        }
        catch (e) {
            alert('Object could not be created');
            return;
        }
    }
    return objXmlHttp;
}

function xmlHttp_Get(xmlhttp, url) {
    xmlhttp.open('GET', url, true);
    xmlhttp.send(null);
}

ChildGridBuilder.aspx GridView

<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 CssClass="GridViewHeader"></HeaderStyle>
    <AlternatingRowStyle BorderStyle="Solid" BorderWidth="0px"></AlternatingRowStyle>
</asp:GridView>

ChildGridBuilder.aspx Code behind

protected void Page_Load(object sender, EventArgs e)
{
    Response.Clear();
    Response.ContentType = "text/xml";
    BindGrid();

    System.IO.StringWriter stringWrite = new System.IO.StringWriter();
    System.Web.UI.HtmlTextWriter htmlWrite = new HtmlTextWriter(stringWrite);
    GridViewDetails.RenderControl(htmlWrite);
    Response.Write(stringWrite.ToString()); 

    Response.End();
}
public override void VerifyRenderingInServerForm(Control control)
{
}
private void BindGrid()
{
    // I am delaying the response to see the Loading... message
    System.Threading.Thread.Sleep(1000);

    using (SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["SQLConnection"].ConnectionString))
    {
        SqlCommand command = new SqlCommand("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 " +
                                            "WHERE OrderDetails.OrderID = '" + Request.QueryString["Id"].ToString() + "'" , connection);
        command.CommandType = CommandType.Text;

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

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

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

CSS StyleSheet

.GridViewStyle
{
    font-family:Calibri;
    font-size:15px;
}
.GridViewHeader
{
    background: url(../../Images/header.png) repeat-x 0px 0px;
}
.GridViewRow
{
}
.GridViewAlternativeRow
{
    background-color:#edf5ff;
}
.InvisibleCol
{
    display:none;
}

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

[Update 01 Nov 2011]
The above implementation shows, when clicking the expand icon in the row - it calls the server to get the GridView script and show in the page. Once the GridView shown, it never call again till the page refresh happening and it will just hide and show the GridView.

But some of our requirement is little different-

1. Whenever the expand button calls, it should call the server to get the GridView script and show in the page. So, it shows the latest GridView data by going to the server every time when clicking the expand button.
   download the example in C# here and in VB here.
   
2. It will function like the same way in blog implementation, but additionally with Refresh button. So when expand button clicked, it will call the server to get the GridView script. It will show and hide as per expand button and wont call server once it shown in the page. The GridView also contains a Refresh button and when clicking the button it will call the server to refresh the data. So the data will be fetched from the server on the first time it expand and when the user clicks Refresh button.
   download the example 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
Hierarchical GridView in ASP.NET with AJAX, JQuery implementation - Part 1
Hierarchical GridView in ASP.NET with AJAX, JQuery implementation - Part 2

Below is the output of the screen,

Initial Page

Loading message when loading the Child Grid when expand button clicked

Hierarchical Grid View with some child grid expanded

Below is the Video output