Animate and Highlight Gridview Rows using jQuery

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_1fig.gif

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_2_1fig.gif

Step_2_2fig.gif

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:

Step_3_1fig.gif

Next--->

Step_3_2fig.gif

Step_3_3fig.gif

Test Connection:

Step_3_4newfig.gif

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_3_img.gif

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_4fig.gif

Step 6: In this step we will write the CSS code which will be inside the <style></style> is given below:

Step_5fig.gif

Step 7: In this Step we have to write the jQuery code inside the <script></script> tag which is given below:

Step_6fig.gif

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_8fig.gif

Step 10: In this step we are going to run the Default2.aspx page by pressing F5 let see the output given below:

Output1:

output1.gif

Output2:

optput2.gif

Output3:

output3.gif