Display Parent-Child Data in GridView with JQuery Effects

Displaying nested data is a common operation performed on several different websites. Usually, a separate control is used to act as a slave for the master control and displays the nested data. This article demonstrates how to view parent-child relationship without using a slave control. The article uses a dynamically generated HTML table to display child data, JQuery to add eye catching animation effects and AJAXPro.NET Library for Ajax calls.

Introduction:

Populating the GridView Control:

The first step is to populate the GridView control. We will use the Northwind database available in SQL SERVER 2000. Here is the code that is used to populate the GridView control.

private void BindData()
        {
            string connectionString = "Server=localhost;Database=Northwind;Trusted_Connection=true";
            SqlConnection myConnection = new SqlConnection(connectionString);
            SqlDataAdapter ad = new SqlDataAdapter("SELECT * FROM Categories", myConnection);
            DataSet ds = new DataSet();
            ad.Fill(ds);

            gvCategories.DataSource = ds;
            gvCategories.DataBind();
        }

Here is the code for the ASPX page which contains the GridView control. I have removed the style attributes for clarity.

<asp:GridView ID="gvCategories" runat="server" AutoGenerateColumns="False"
>

    <Columns>

     <asp:TemplateField>
    <ItemTemplate>
    <input type="checkbox" id='chkSelect_<%# Container.DataItemIndex + 1 %>' onclick='getProducts("chkSelect_<%# Container.DataItemIndex + 1 %>",<%# Eval("id") %>,"divDetail_<%# Container.DataItemIndex + 1 %>")' />
    <%# Eval("CategoryName") %>

    <div style="display:none;" id='divDetail_<%# Container.DataItemIndex + 1 %>'>

    </div>

    </ItemTemplate>
    </asp:TemplateField>

    </Columns>
    </asp:GridView>

As, you can see there is only have a single column inside the GridView control which is a TemplateField column. Inside the TemplateField column we display the checkbox and data from the column “CategoryName”.

The screenshot below shows how the GridView will look like once it is populated.

There is a lot more happening inside the GridView column. First, the checkbox is created with a unique “ID” to make sure which checkbox is clicked. The binding expression <%# Container.DataItemIndex + 1 %> returns an incremental row number for the GridView rows. The checkbox also exposes an “onclick” function which takes three parameters. The first parameter is the “id” of the checkbox, the second parameter is the primary key of the database table which in this case is “id”. And the final parameter is the “id” of the DIV element which is used to display the nested/child data.

<input type="checkbox" id='chkSelect_<%# Container.DataItemIndex + 1 %>' onclick='getProducts("chkSelect_<%# Container.DataItemIndex + 1 %>",<%# Eval("id") %>,"divDetail_<%# Container.DataItemIndex + 1 %>")' />

The JavaScript Function:

Let’s take a look at the getProducts function which is fired whenever a checkbox is checked inside the GridView control.

function getProducts(chkSelectId,categoryId,detailDivId)
{
    if(document.getElementById(chkSelectId).checked)
    {

    DemoJQueryWebApps._Default.getProducts(categoryId,function(response)
    {
         $(document.getElementById(detailDivId)).show("slow");

         document.getElementById(detailDivId).innerHTML = response.value;
    }
    );

    }

    else
    {
        $(document.getElementById(detailDivId)).hide("slow");
    }
}

Inside the function we check if the checkbox is checked or unchecked. If it is checked then we make an asynchronous call to the server side method and retrieve the child data else we hide the nested data.

We have also used little bit of JQuery to create nifty animation effects.

Server Side Method:

The server side is responsible for pulling the data out of the database table. The method named is “getProducts”.

[AjaxPro.AjaxMethod]
        public string getProducts(int categoryId)
        {
            NorthwindDataContext northwind = new NorthwindDataContext();

            var products = from p in northwind.Products
                           where p.CategoryID == categoryId
                           select p;

Table table = null;

            if (products.Count() > 0)
            {
                table = new Table();

                foreach (var product in products)
                {
                    TableRow row = new TableRow();
                    TableCell cell = new TableCell();
                    cell.Text = product.ProductName;
                    row.Cells.Add(cell);
                    table.Rows.Add(row);
                }
            }

            if (table != null)
                return ConvertControlToHTML(table);
            else return "No records found!";
        }

We have also used LINQ to Classes to make our dynamic DAL layer. The products are retrieved based on the categoryID and are inserted in a dynamically generated HTML table. Finally, the table is converted to HTML using the custom ConvertControlToHTML method and returned to the client.

You can view the animation using the following link:

Live Animation of the Effect

Conclusion:

In this article we created a parent-child relationship using the GridView control. The highlight of the article was NOT to use a separate child control to display the nested data but to embed the details inside the GridView control itself. The article also demonstrated how to use few lines of code to add crisp JQuery effects and make your application more appealing.