|
<%@ 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">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="~/WebService.asmx" />
</Services>
</asp:ScriptManager>
<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.