Geeks With Blogs

  • azamsharp The WWDC app says that there are new videos but there is nothing under videos!!! about 627 days ago
  • azamsharp Can I post my opinion on iOS 7 Beta or is it under NDA or something? about 627 days ago
  • azamsharp iOS 7 BETA installed successfully! about 627 days ago
  • azamsharp iOS 7 BETA installed! Now restoring! I am on NET10 which uses AT&T network. Hopefully 3G will still work! Lets c.. about 627 days ago
  • azamsharp The missing of button borders in Xcode 5 makes it hard to determine the clickable area. about 627 days ago
  • azamsharp I might wait for iOS to be released before I can put it on my device! Don't want a bricked or unstable device! about 627 days ago
  • azamsharp Android has many features that no one uses, number of versions that no one upgrades to and thousands of apps that no one pays for. about 627 days ago
  • azamsharp Maybe it is just me but the new iOS 7 UI looks like Windows Phone 8 UI! #maybeIamCrazy about 627 days ago
  • azamsharp Anyone using H20 network upgraded to iOS 7 BETA Keep me updated if you face any problems. about 627 days ago
  • azamsharp @merowing_ You already downloaded it! I cannot even load the developer's website! :( about 628 days ago

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: | Join free