Animating asp.net gridview with Jquery

Vignesh Kumar

13y4.2k.NET

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" %>

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

http://www.w3.org/1999/xhtml">

            AutoGenerateColumns="False" CellPadding="4" DataSourceID="SqlDataSource1"
        ForeColor="#333333" GridLines="None" Width="300px">


                            SortExpression="PersonID" />
                            SortExpression="LastName" />
                            SortExpression="FirstName" />
                            SortExpression="Office" />

            ConnectionString="<%$ ConnectionStrings:AdventureWorks2008ConnectionString %>"
        SelectCommand="SELECT [PersonID], [LastName], [FirstName], [Office], [City] FROM [Persons]">

13 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sanjeeb Lenka13y ago
Accepted answer
hi i modified your code check this:

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










            AutoGenerateColumns="False" CellPadding="4" DataSourceID="SqlDataSource1"
        ForeColor="#333333" GridLines="None" Width="300px">


                            SortExpression="PersonID" />
                            SortExpression="LastName" />
                            SortExpression="FirstName" />
                            SortExpression="Office" />














            ConnectionString="<%$ ConnectionStrings:AdventureWorks2008ConnectionString %>"
        SelectCommand="SELECT [PersonID], [LastName], [FirstName], [Office], [City] FROM [Persons]">




don't forgot to add the reference of jquery.
0
Vignesh Kumar13y ago
Its similar to this. But not able to replicate this to the code. Moreover it should be alike this one
http://www.dotnetcurry.com/ShowArticle.aspx?ID=219

And also this another one
http://www.dotnetcurry.com/ShowArticle.aspx?ID=287
0
Sanjeeb Lenka13y ago
hi,
i didn't get you. plz provide more details...
0
Vignesh Kumar13y ago
Hi Sanjeeb,

Is it possible to do slide animation using ajax.
0
Sanjeeb Lenka13y ago
you are welcome......
0
Vignesh Kumar13y ago
Thanks Sanjeeb and Ifti for helping me out.
0
Iftikar Hussain13y ago
try like this

Regards,
Iftikar
0
Vignesh Kumar13y ago
Hi,

This is the code I have been using. But no luck.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridAnimate.aspx.cs" Inherits="Animate.GridAnimate" %>
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">









           AutoGenerateColumns="False" CellPadding="4" DataSourceID="SqlDataSource1"
        ForeColor="#333333" GridLines="None" Width="300px" RowStyle-CssClass="rowOver">


                            SortExpression="PersonID" />
                            SortExpression="LastName" />
                            SortExpression="FirstName" />
                            SortExpression="Office" />













            ConnectionString="<%$ ConnectionStrings:AdventureWorks2008ConnectionString %>"
        SelectCommand="SELECT [PersonID], [LastName], [FirstName], [Office], [City] FROM [Persons]">



0
Iftikar Hussain13y ago
comment this code and check

Regards,
Iftikar
0
Sanjeeb Lenka13y ago
hi,

Refer to this link

http://www.aspsnippets.com/Articles/How-to-change-GridView-Row-Color-on-Mouseover-in-ASPNet.aspx

http://www.aspdotnet-suresh.com/2011/02/how-to-highlight-gridview-rows-on.html
0
Iftikar Hussain13y ago
Hi,
My understanding is that just need to change the style for each row whenever mouseover happen on that row. You can do this simply by using css only.
Add RowStyle-Css="rowOver" for gridview

        AutoGenerateColumns="False" CellPadding="4" DataSourceID="SqlDataSource1"
        ForeColor="#333333" GridLines="None" Width="300px" RowStyle-CssClass="rowOver">

in css

tr.rowOver:hover
{
  cursor: pointer;
}
tr.rowOver:hover
{
  background-color: #8B2323;
border: solid 1px black;
}

Regards,
Iftika
0
Vignesh Kumar13y ago
Its still the same!
0
Raj Bandi13y ago
Hi Vignesh,

You were trying to access GridView with id GridView1. You have to use ClientID not the ID in JQuery.

Change lines

$('#GridView1 thead').addClass('headerRow');
$('#GridView1 tbody tr').mouseover(function () {

with this code

var gridId = '<%=GridView1.ClientID%>';
$('#'+gridId+' thead').addClass('headerRow');
$('#'+gridId +' tbody tr').mouseover(function () {

or alternatively you can do like this without ClientID

$("table[id*='GridView1'] thead").fi.addClass('headerRow');
$("table[id*='GridView1'] tbody tr").mouseover(function () {

Cheers,
Raj
0