Click here to Skip to main content
14,485,669 members

Row Expand Collapse using JQuery and Ajax

Rate this:
4.45 (10 votes)
Please Sign up or sign in to vote.
4.45 (10 votes)
18 Aug 2010CPOL
This article describes how to expand and collapse rows of a GridView or Table and showing data details using Jquery and Ajax


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.


  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
//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
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.


    height: "0px",
    opacity: 0.25,
    }, 1000, function() {
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.

       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( );
       $("#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:

    public CollectData GetDetails(string name)
        SqlConnection con = new SqlConnection
        SqlCommand cmd = new SqlCommand("Select cost, imagePath, 
		description from Products where ProductId='" + name + "'",con);
        SqlDataReader data;
        CollectData c = new CollectData();
            if (data.Read())
                c.cost= data[0].ToString();
                c.imagePath = data[1].ToString();
                c.description = data[2].ToString();
                return c;
                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;


We have mixed up Jquery, Ajax, server control (Gridview) to get quick and visualized output. Result can be slightly different depending on the browsers.


  • 18th August, 2010: Initial post


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

India India
I'm student (CE).

Comments and Discussions

GeneralMy vote of 2 Pin
dnxit17-Jan-13 14:41
Memberdnxit17-Jan-13 14:41 
maorray8-Nov-10 0:59
Membermaorray8-Nov-10 0:59 
Stefan Bornemann18-Jun-12 8:30
MemberStefan Bornemann18-Jun-12 8:30 
GeneralMy vote of 1 Pin
Member 10419927-Oct-10 9:08
MemberMember 10419927-Oct-10 9:08 
GeneralRe: My vote of 1 Pin
jayantbramhankar18-Jun-11 0:20
Memberjayantbramhankar18-Jun-11 0:20 
GeneralMy vote of 5 Pin
jitendraZaa18-Aug-10 22:06
MemberjitendraZaa18-Aug-10 22:06 
GeneralRe: My vote of 5 Pin
jayantbramhankar23-Aug-10 3:37
Memberjayantbramhankar23-Aug-10 3:37 
GeneralMy vote of 5 Pin
rameshvar18-Aug-10 9:15
Memberrameshvar18-Aug-10 9:15 
GeneralRe: My vote of 5 Pin
jayantbramhankar18-Aug-10 9:30
Memberjayantbramhankar18-Aug-10 9:30 
QuestionWhat about ScriptMethod? Pin
Petr Pechovic18-Aug-10 4:26
professionalPetr Pechovic18-Aug-10 4:26 
AnswerScriptMethod implementd. Pin
jayantbramhankar18-Aug-10 5:51
Memberjayantbramhankar18-Aug-10 5:51 
GeneralRe: ScriptMethod implementd. Pin
agorby18-Aug-10 9:00
Memberagorby18-Aug-10 9:00 
GeneralRe: ScriptMethod implementd. Pin
jayantbramhankar18-Aug-10 9:29
Memberjayantbramhankar18-Aug-10 9:29 
GeneralMy vote of 5 Pin
Pranay Rana18-Aug-10 3:02
professionalPranay Rana18-Aug-10 3:02 
GeneralRe: My vote of 5 Pin
jayantbramhankar18-Aug-10 3:28
Memberjayantbramhankar18-Aug-10 3:28 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Posted 18 Aug 2010


34 bookmarked