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();
            ad.Fill(ds);

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

Here is the ASPX code for the GridView control:

 <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 %>")' />
    </ItemTemplate>
    </asp:TemplateField>
   
     <asp:TemplateField>
    <ItemTemplate>
   
    <%# Eval("CategoryName") %>
   
    <div style="display:none;" id='divDetail_<%# Container.DataItemIndex + 1 %>'>
   
    </div>  
   
    </ItemTemplate>
    </asp:TemplateField>
   
    </Columns>
    
    </asp:GridView>

 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)
{   
    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");
    }
}

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.

 [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 = 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);
            }
           
            return ConvertControlToHTML(table);           
        }   

        private string ConvertControlToHTML(Control source)
        {
            StringWriter sw = new StringWriter();
            HtmlTextWriter htw = new HtmlTextWriter(sw);
            source.RenderControl(htw);
            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: GeeksWithBlogs.net | Join free