Introduction: In this article we are
going to explore how we will use jQuery with gridview. In this article we
are going to animate the gridview from upwards to downwards and also we will
highlight the rows using jQuery. Further in details in this article we will create a gridview in
which we have to bind the data to display the records the gridview will animate
from upwards to downwards and whenever we will click on the records to select we
will see that it will highlighted the record which was selected. Further it will
toggle the column whenever we will click on the column of the row we will see
that the color of the column will be faded if we click again then it's getting
dark, It's all performed by using jQuery. Here we will use CSS to
apply color using jQuery. So to see such features you will
have to follow the steps given below:
Step 1: Firstly we have to
create a web Application
- Go to Visual Studio 2010
- Create the web Application
- Click OK
Step 2: Secondly you have to add a new
page to the website
- Go to the Solution Explorer
- Right Click o Project name
- Select add new item
- Add new web page and give it a name
- Click OK
Step 3: In this step you have to drag
and drop the gridview from the toolbox to the page and will have to bind data to
the gridview let see from where it is easy to bind data:
Next--->
Test Connection:
Step 4: In this step we are going to see
that see from where the js reference will be added to the source page of the
default2.aspx page.
Step 5: Now we are going to write the
script code which will be inside either on the head section or in the body
section it will depend upon you which way you like most to placed it.
Step 6: In this step we will write the
CSS code which will be inside the <style></style> is given below:
Step 7: In this Step we have to write
the jQuery code inside the <script></script> tag which is given below:
Step 8: In this step we will see the
complete code for the Default2.aspx page which is given below:
Code:
<%@
Page Language="C#"
AutoEventWireup="true"
CodeFile="Default2.aspx.cs"
Inherits="Default2"
%>
<!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
runat="server">
<title>Gridview
demo</title>
<script
type="text/javascript"
src="Scripts/jquery-1.4.1.min.js"></script>
<script
type="text/javascript">
$(document).ready(function () {
$("tr").filter(function
() {
return $('td',
this).length && !$('table',
this).length
}).click(function () {
$(this).toggleClass('selection');
});
$("#GridView1").animate({
marginTop: "100px" }, 500);
$("th").toggleClass('header');
});
$(function () {
$(this).toggle(
function (event) {
$(event.target)
.css('opacity', 0.4);
},
function (event) {
$(event.target)
.css('opacity', 1.0);
}
);
});
</script>
<style
type="text/css">
.selection
{
background-color:Purple;
cursor:pointer;
border:5px
groove #888888;
}
.header
{
background-color:
#ff6666;
border:5px
groove #383838;
}
.gridview
{
position:absolute;
margin-left:0px;
margin-top:-60px;
}
.div1
{
margin-left:250px;
}
</style>
</head>
<body>
<form
id="form1"
runat="server">
<div
class="div1"
style="border:
5px groove #00FF00; height:
94px; font-family:
'Comic Sans MS'; font-size:
xx-large; color:
#000000;
background-color:
#FF8040; width:
467px;">
Animate and highlight gridview using jQuery
<asp:GridView
CssClass="gridview"
ID="GridView1"
runat="server"
AutoGenerateColumns="False"
DataSourceID="SqlDataSource1"
Height="150px"
Width="217px"
BackColor="#008040"
ForeColor="#FFFF66">
<Columns>
<asp:BoundField
DataField="id"
HeaderText="id"
SortExpression="id"
/>
<asp:BoundField
DataField="name"
HeaderText="name"
SortExpression="name"
/>
<asp:BoundField
DataField="designation"
HeaderText="designation"
SortExpression="designation"
/>
<asp:BoundField
DataField="salary"
HeaderText="salary"
SortExpression="salary"
/>
</Columns>
</asp:GridView>
<asp:SqlDataSource
ID="SqlDataSource2"
runat="server"></asp:SqlDataSource>
<asp:SqlDataSource
ID="SqlDataSource1"
runat="server"
ConnectionString="<%$
ConnectionStrings:amitConnectionString %>"
SelectCommand="SELECT
* FROM [employee]"></asp:SqlDataSource>
</div>
</form>
</body>
</html>
Step 9: In this step we
will see the design page of the Default2.aspx page let see the figure which id
give below:
Step 10: In this step
we are going to run the Default2.aspx page by pressing F5 let see the output
given below:
Output1:
Output2:
Output3: