GridView Animation Using JQuery in ASP.NET

Introduction

One day day I was investigating how to add some more cool effects to the GridView control using JQuery. This article demonstrates how to create simple UI effects in an ASP.NET GridView control using jQuery. The JQuery API has many CSS related functions, which can be used to create many UI effects in the modern web applications. The most common of those methods are addClass, removeClass and toggleClass, which add, remove or toggle CSS classes to any matched element.

Description

In this article:

• First I create a database in the SQL Server 2008.
• Create an ASP.NET website and add a GridView control to the page.
• I am binding the GridView with a DataTable object that I created in the Page Load event in the code behind file.
• Next you need to add the following CSS style rules inside the <head> section of the page. We will use the headerRow, highlightRow and selectedRow CSS classes.
• Next add the JQuery script file reference inside the <head> section of the page depending on the script file location and JQuery version you are using.
• Next add the following JQuery code inside a script block in the <head> section of the page.

Now it is time to see how to do all that in detail.

First go through SQL Server and make a table. The following image shows the process.

Step 1: First we have to create a Web Application.

• Go to Visual Studio 2010.
• New--> and select the Web Application.
• Give whatever name you want to.
• Click OK.

Step 2: Secondly you have to add a new page to the website.

• Go to the Solution Explorer.
• Right-click on the project name.
• Select add new item.
• Add a new web page and give it a name.
• Click OK.
  

Step 3: In this step we will see how to add style sheet code. Whenever we write style sheet code you have to be careful that it is written inside the <style></style> tags and you have to place it inside the head section. We will use the headerRow, highlightRow and selectedRow CSS classes.

<style type="text/css">
th
{
text-align: left;
}
.headerRow
{
background-color: #458B74;
color: White;
font-weight: bold;
}
.highlightRow
{
background-color: #8B2323;
cursor: pointer;
border: solid 1px black;
}
.selectedRow
{
background-color: #6495ED;
cursor: pointer;
border: solid 1px black;
color: White;
}
</style>

Step 4: In this step we have to write the script reference to the aspx page; let us see from where you have to write the script code.

Step 5: Let us see the script code which you have to add inside the <script></script> tags and that will be placed either in the head section or the body section as you prefer.

<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>

Step 6: In this step we have to write the jQuery code which is given below.

<script type="text/javascript">
$(document).ready(function () {
$('#GridView1 thead').addClass('headerRow');
$('#GridView1 tbody tr').mouseover(function () {
$(this).addClass('highlightRow');
}).mouseout(function () {
$(this).removeClass('highlightRow');
}).click(function () {
$(this).toggleClass('selectedRow');
});
});
</script>

Step 7 : In this step you will see the body code of the Default2.aspx page which is given below.

Body Code:

<body bgcolor="#8B008B">
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" BackColor="White" Font-Size="10"
Font-Names="Verdana" BorderColor="#000000" BorderStyle="Solid" BorderWidth="1px"
CellPadding="3" Width="400px" CellSpacing="0" GridLines="Horizontal">
</asp:GridView>
</form>
</body>

Step 8: In this step we will see the complete code of the Default2.aspx page which is given below.