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!