Animate and Highlight Gridview Rows using jQuery

Sapna
May 15, 2012

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

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>