Post
Ask Question
Vignesh Kumar

Vignesh Kumar

  • NA
  • 1k
  • 416.5k

Animating asp.net gridview with Jquery

Aug 7 2013 6:46 AM
Can anyone help me this animating this grid view with jquery. Its more over like when I get the mouse to the grid the color change has to happen, but there is some problem with the code. Can anyone correct it?

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridAnimate.aspx.cs" Inherits="Animate.GridAnimate" %>

<!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></title>

  <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></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>

</head>
<body>
    <form id="form1" runat="server">
    <div>
   
    </div>
    <asp:GridView ID="GridView1" runat="server" AllowPaging="True"
        AutoGenerateColumns="False" CellPadding="4" DataSourceID="SqlDataSource1"
        ForeColor="#333333" GridLines="None" Width="300px">
        <AlternatingRowStyle BackColor="White" />
        <Columns>
            <asp:BoundField DataField="PersonID" HeaderText="PersonID"
                SortExpression="PersonID" />
            <asp:BoundField DataField="LastName" HeaderText="LastName"
                SortExpression="LastName" />
            <asp:BoundField DataField="FirstName" HeaderText="FirstName"
                SortExpression="FirstName" />
            <asp:BoundField DataField="Office" HeaderText="Office"
                SortExpression="Office" />
            <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
        </Columns>
        <EditRowStyle BackColor="#2461BF" />
        <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
        <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
        <RowStyle BackColor="#EFF3FB" />
        <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
        <SortedAscendingCellStyle BackColor="#F5F7FB" />
        <SortedAscendingHeaderStyle BackColor="#6D95E1" />
        <SortedDescendingCellStyle BackColor="#E9EBEF" />
        <SortedDescendingHeaderStyle BackColor="#4870BE" />
    </asp:GridView>

    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
        ConnectionString="<%$ ConnectionStrings:AdventureWorks2008ConnectionString %>"
        SelectCommand="SELECT [PersonID], [LastName], [FirstName], [Office], [City] FROM [Persons]">
    </asp:SqlDataSource>
    </form>
</body>
</html>




Answers (13)