Geeks With Blogs

@azamsharp
  • azamsharp The WWDC app says that there are new videos but there is nothing under videos!!! about 444 days ago
  • azamsharp Can I post my opinion on iOS 7 Beta or is it under NDA or something? about 444 days ago
  • azamsharp iOS 7 BETA installed successfully! about 444 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 444 days ago
  • azamsharp The missing of button borders in Xcode 5 makes it hard to determine the clickable area. about 444 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 444 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 444 days ago
  • azamsharp Maybe it is just me but the new iOS 7 UI looks like Windows Phone 8 UI! #maybeIamCrazy about 445 days ago
  • azamsharp Anyone using H20 network upgraded to iOS 7 BETA Keep me updated if you face any problems. about 445 days ago
  • azamsharp @merowing_ You already downloaded it! I cannot even load the developer's website! :( about 445 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();
            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