Row Expand Collapse using JQuery and Ajax

• Download source - 311.02 KB

Introduction

Nowadays, an important issue with web applications is how quickly a web page is rendered and how it is animated or visualized.

So for a quick reply from the server, Ajax is the solution and for some visualizations with server side response, we mostly use jquery or JavaScript.

In this article, for expanding, collapsing and adding details to gridview row, we are going to use AJAX to make a call to the server and we will visualize 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 Jquery Code

Expanding Row

For expanding any row, we need to create a 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 increment to assign new row id everytime
trindex++;
//create a row with td colspan 3 to show product description
var row= '><td class="currRow" colspan="3" ><
div id="did"><img id="imagepath" src=""
style="height: 81px; width: 104px" />  Description :<
span id="des">sd</span><p>Cost :<
span id="cost">sd</span></p></div></td></tr>';

//adding animation to row
var newRow = $("<tr id=tr"+ trindex + row).animate({
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 the previous created row, so we need to remember the previous created rowIndex or its id.

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

Ajax Call to the Server

For getting the full details about our shortly highlighted product, we need to make an asynchronous call to server using AJAX. We are passing some key values to server(product Id) to extract the resultset.

$.ajax({
       type: "POST",
       url: "WebService.asmx/GetDetails",   //webserviceName/methodName
       data: "{'name': '" + $(this).find("td span").text()
       + "'}",  //passing values to webservice(productid)
       contentType: "application/json; charset=utf-8",
       dataType: "json",
       success: function(msg) {
       //extracting response data to newly created row
       $("#tr"+trindex ).find("td #did p #cost").text(msg.d.id );
       $("#tr"+trindex ).find("td #did  #des").text(msg.d.order);
       $("#tr"+trindex ).find("td #did #imagepath").attr
       ('src', msg.d.order); //$("#myImage").attr("src", "path/to/newImage.jpg");
       },
       error: FailedMessage     //showing error message if failure
       }); 

Using the WebService.cs

Programmable application logic is 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 slightly different depending on the browsers.

History

• 18^th August, 2010: Initial post