Grid view row expand/collapase using Jquery , Ajax

Now day’s , important issue with web applications is how quick a wed page is rendered and how it is animated or visualized
So for quick reply from server Ajax is the solutions and for some visualizations with server side response we mostly use jquery or javascript.
I this article, for expanding , collapsing and adding details to gridview row we are going to use AJAX to make call to server and we will visualized it using jquery.


Aim :
1. Getting details of product by extracting details at the next to current row and before second one.
2. Visualizing the expanding of rows.
3. No server side postback.
4. Using GridView Control to bind data and simple data binding to table using scriptlet.

Using the Jquery Code :
Expanding Row :
For expanding any row, we need to create an new row with the serverside details and then we will add it to the next of current row.



var trindex=0; //trindex hold row index created by jquery
$("tr").click(function() {
if ($(this).find("td:first").length > 0) { //check whether it is header or content row
//row index icreament to assign new row id everytime
trindex++;
//create a row with td colspan 3 to show product description


var row= '>

Description :sd

Cost :sd

';

//adding animation to row
var newRow = $(" height: "140px",
opacity: 0.25,
}, 500);

//adding row to existing table
$(this).after(newRow);

Collapsing Row :
At the same moment we expand any row, we collapse previous created row, so we need to remember the previous created rowIndex or it’s id.












$("#"+rowName).find('td').removeClass('currRow').addClass('hideRow');
$("#"+rowName).animate({
height: "0px",
opacity: 0.25,
}, 1000, function() {
$("#"+rowName).remove();


Using The WebService.cs
Programmable application logic accessible via standard Web protocols.
We are using webservice to extract data from database using jquery Ajax call.
CollectData class to hold extracted details from db.














public class CollectData
{
public string cost { get; set; }
public string imagePath { get; set; }
public string description { get; set; }
}

Simple queries to the database via WebMethod

[WebMethod()]
public CollectData GetDetails(string name)
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);
SqlCommand cmd = new SqlCommand("Select cost, imagePath, description from Products where ProductId='" + name + "'",con);
SqlDataReader data;
CollectData c = new CollectData();
try
{
con.Open();
data=cmd.ExecuteReader();
if (data.Read())
{
c.cost= data[0].ToString();
c.imagePath = data[1].ToString();
c.description = data[2].ToString();
return c;
}
else
{
c.cost = "N/A";
c.imagePath = "N/A";
c.description = "N/A";
return c;
}
}
catch (Exception ex)
{
c.cost = "N/A";
c.imagePath = "N/A";
c.description = "N/A";
return c;
}

}
Conclusion :
We have mixed up Jquery, Ajax, server Control(Gridview ) to get quick and visualized output.
Result can be little bit change as per the browsers.

Download Demo Source (CodeProject)
Download Demo Source (Box.net).