Animating asp.net gridview with Jquery

Sign in to answer this question.

• 

  Sanjeeb Lenka13y agoPosted Aug 12, 2013, 4:44 AM

  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.
  
  
  
• VK

  Vignesh Kumar13y agoPosted Aug 12, 2013, 8:24 AM

  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
• 

  Sanjeeb Lenka13y agoPosted Aug 12, 2013, 7:54 AM

  hi,
  i didn't get you. plz provide more details...
  
• VK

  Vignesh Kumar13y agoPosted Aug 12, 2013, 7:33 AM

  Hi Sanjeeb,
  
  Is it possible to do slide animation using ajax.
• 

  Sanjeeb Lenka13y agoPosted Aug 12, 2013, 6:29 AM

  you are welcome......
  
• VK

  Vignesh Kumar13y agoPosted Aug 12, 2013, 6:28 AM

  Thanks Sanjeeb and Ifti for helping me out.
• IH

  Iftikar Hussain13y agoPosted Aug 12, 2013, 3:45 AM

  try like this
  
  

  
  Regards,
  Iftikar
• VK

  Vignesh Kumar13y agoPosted Aug 12, 2013, 3:40 AM

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

  
  
  
• IH

  Iftikar Hussain13y agoPosted Aug 12, 2013, 3:27 AM

  comment this code and check
  
   
  
  Regards,
  Iftikar
• 

  Sanjeeb Lenka13y agoPosted Aug 12, 2013, 3:19 AM

  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
  
• IH

  Iftikar Hussain13y agoPosted Aug 8, 2013, 3:15 AM

  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
• VK

  Vignesh Kumar13y agoPosted Aug 8, 2013, 2:37 AM

  Its still the same!
• 

  Raj Bandi13y agoPosted Aug 7, 2013, 8:53 PM

  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