Click here to Skip to main content
Click here to Skip to main content
Articles » Web Development » ASP.NET » General » Downloads
 
Add your own
alternative version

Row Expand Collapse using JQuery and Ajax

, 18 Aug 2010 CPOL
This article describes how to expand and collapse rows of a GridView or Table and showing data details using Jquery and Ajax
RowExpandCollapse.zip
RowExpandCollapse
App_Code
App_Data
DbProduct.mdf
DbProduct_log.LDF
css
images
coolpix.jpg
dellinspiron.jpg
spypen.jpg
js
RowExpandCollpase.zip
App_Code
App_Data
DbProduct.mdf
DbProduct_log.LDF
css
images
coolpix.jpg
dellinspiron.jpg
spypen.jpg
js
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>
        GridView Rows Expand & collapse using Jquery/Ajax
    </title>

    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() { 
        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
            trindex++;                                  //row index icreament to assign new row id everytime
            //create a row with td colspan 3 to show product description
            var row= '><td  colspan="3" class="currRow"><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 anitmation to row
            var newRow = $("<tr id=tr"+ trindex + row).animate({ 
            height: "140px", 
            opacity: 0.25,
            }, 1000);

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

         //getting previous created row
        var rowName="tr" + parseInt(trindex-1);

        //reomving previous created row from table with animation
        $("#"+rowName).find('td').removeClass('currRow').addClass('hideRow');
         $("#"+rowName).animate({ 
            height: "0px", 
            opacity: 0.25,
        }, 1000, function() {
         $("#"+rowName).remove();
  });
         
   //ajax call to webservice
        $.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) {
                 //extrating response data to newly created row
                 $("#tr"+trindex ).find("td #did p #cost").text(msg.d.cost );
                 $("#tr"+trindex ).find("td #did  #des").text(msg.d.description); 
                 $("#tr"+trindex ).find("td #did #imagepath").attr('src', msg.d.imagePath); //$("#myImage").attr("src", "path/to/newImage.jpg");
                 },
                 error: FailedMessage     //showing error message if failure
             });
             }
        }); 
        
}); 
          function FailedMessage(result) {
              alert(result.status + ' ' + result.statusText);
          }  
    </script>
<style type="text/css">
    .currRow
    {
        background-color:Blue;
        cursor:pointer;
        border-width:thin;
        border-color:Aqua;
        color:White;
        font-style:italic;
        font-size:medium;
    }   
    .hideRow
    {
        background-color:Red;
        cursor:pointer;
        border-width:thin;
        border-color:Blue;
        width: 100%;
        color:White;
        font-style:italic;
        font-size:medium;
    }
    
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <p> 
        <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" 
          BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" 
          CellPadding="4" DataSourceID="SqlDataSource1" ForeColor="Black" 
          GridLines="Horizontal" Width="393px">
          <Columns>
              <asp:TemplateField>
                <ItemTemplate>
                <asp:Label ID="txt" runat="server" Text='<%# Eval("ProductId") %>'></asp:Label>
                </ItemTemplate>
                </asp:TemplateField>
              <asp:BoundField DataField="ProductName" HeaderText="Product" SortExpression="LName" />
              <asp:BoundField DataField="Category" HeaderText="Category" SortExpression="Password" />
          </Columns>
          <FooterStyle BackColor="#CCCC99" ForeColor="Black" />
          <HeaderStyle BackColor="#333333" Font-Bold="True" ForeColor="White" />
          <PagerStyle BackColor="White" ForeColor="Black" HorizontalAlign="Right" />
          <SelectedRowStyle BackColor="#CC3333" Font-Bold="True" ForeColor="White" />
          <SortedAscendingCellStyle BackColor="#F7F7F7" />
          <SortedAscendingHeaderStyle BackColor="#4B4B4B" />
          <SortedDescendingCellStyle BackColor="#E5E5E5" />
          <SortedDescendingHeaderStyle BackColor="#242121" />
      </asp:GridView>
        
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
            SelectCommand="SELECT [ProductId], [ProductName], [Category] FROM [Products]">
        </asp:SqlDataSource>
    </p>
</form>
</body>
</html>


By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

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

Share

About the Author

jayantbramhankar
Student
India India
I'm student (CE).
Follow on   Google+

| Advertise | Privacy | Mobile
Web04 | 2.8.141015.1 | Last Updated 18 Aug 2010
Article Copyright 2010 by jayantbramhankar
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid