Geeks With Blogs
AzamSharp Some day I will know everything. I hope that day never comes.

So, on Christmas day I was just checked how to add some more cool effects to the GridView control using JQuery. In this post I will display parent-child data in the GridView control with some help of the wonderful JQuery library.

Let's first 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();

            gvCategories.DataSource = ds;

Here is the ASPX code for the GridView control:

 <asp:GridView ID="gvCategories" runat="server" AutoGenerateColumns="False">
    <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 %>'>

 The first column is the checkbox column which allows the user to select a particular row. When the row is selected the dependents products are displayed using a call to the "getProducts" function. The Container.DataItemIndex + 1 is used to give a unique id to each checkbox.

If you look in the second template field column you will also notice that a div is created inside each row. This div divDetail_[IndexNumber] is used to display the products.

Now, let's see the getProducts function.

function getProducts(chkSelectId,categoryId,detailDivId)

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

I have used AJAXPro.NET library to make my AJAX calls. The server side method name is "getProducts". I have also used JQuery to add some animation effect to the dependent objects.

Here is the server side getProducts method.

        public string getProducts(int categoryId)
            NorthwindDataContext northwind = new NorthwindDataContext();                    

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

            Table table = new Table();          

            foreach (var product in products)
                TableRow row = new TableRow();
                TableCell cell = new TableCell();
                cell.Text = product.ProductName;
            return ConvertControlToHTML(table);           

        private string ConvertControlToHTML(Control source)
            StringWriter sw = new StringWriter();
            HtmlTextWriter htw = new HtmlTextWriter(sw);
            return sw.ToString();


And here is the final effect in the GIF animation below:


PS: You might want to edit the code little bit to show the checkbox at the top when the expansion has been completed!

Posted on Tuesday, December 25, 2007 4:58 PM | Back to top

Comments on this post: GridView Parent Child View with JQuery Effects

No comments posted yet.
Your comment:
 (will show your gravatar)

Copyright © Mohammad Azam | Powered by: