GridView Animation Using JQuery in ASP.NET

Sapna
May 15, 2012

27.5k
0
0
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

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.

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.

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:

Step 8: In this step we will see the complete code of 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> GriedView Animation Using jQuery in ASP.NET</title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<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>
<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>
<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>
</html>

Step 9 : In this step we will see the design of the Default2.aspx page which is given below.

Step 10 :In this step I am binding the GridView with a DataTable object that I created in the Page Load event in the code behind file of Default2.aspx page.

Code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
public partial class Default2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        SqlConnection con = new SqlConnection(@"Data Source=.;Initial Catalog=akshay;Persist Security Info=True;User ID=sa;Password=wintellect";
        SqlDataAdapter adap = new SqlDataAdapter("select * from Person",con);
        DataSet ds=new DataSet();
      adap.Fill(ds,"Person");
        GridView1.DataSource = ds.Tables["Person"];
        GridView1.DataBind();
        GridView1.UseAccessibleHeader = true;
        GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
    }
}