Animate a GridView row using the AJAX Control Toolkit from client code

I've run across a few situations in which I wanted to animate a certain row in a GridView as a result of some client action.A0 The reason that this is a little tricky is that the AJAX Control Toolkit's Animation Extender needs to act on a certain Target Control (identified of course by the TargetControlID) and you can't point the target control as a specific grid view row (not that you would even want to).

Both methods I will discuss use the same actual animation code -- they just differ in the way in which the animation is called.A0 I'll begin with the common animation code, which flashes the row with a color change animation (basically a fading highlight).

function animateRow(affectedRow)

{

 //first save the existing row color so you can restore it after the animation is completed

 //you may have to do some post-processing to make sure the affectedRowColor is a hex value like #FFFFFF

 var affectedRowColor = affectedRow.style.backgroundColor;

 animation = new AjaxControlToolkit.Animation.ColorAnimation(affectedRow, 2, 32, "style", "backgroundColor", "#ffff99", affectedRowColor);

 animation.play();

} 

Basically the above code uses the AjaxControlToolkit Animation API to create a ColorAnimation that acts on the affected row, which will cause the entire row to highlight and then fade back to its original color.

The quick method for getting access to the affected row can be used when an element of that row initiates the animation (for example, click on an update button flashes the row that it is contained in).A0 The code would look something like this:

<asp:TemplateField HeaderText="Highlight My Row"> 

 <ItemTemplate> 

 <input type="button" value="Click Me" onclick="animateRow(this.parentNode.parentNode);" /> 

 </ItemTemplate> 

</asp:TemplateField> 

The onclick event of this template field button calls the above animateRow function and passes it's grandparent node (this.parentNode.parentNode).A0 Since the DOM tree has the element inside a <td/> which is inside a <tr/>, we know that the element's grandparent is the row to animate.

The second method involves giving each row a unique identifier during the handling of the rowCreated event.A0 The details will change depending on your implementation, but lets assume that you are using a GridView with a bound ID property (which is also a datakey).A0 Then you need to handle the rowCreated event and add an "id" attribute to each row:

protected void gv_RowCreated(object sender, GridViewRowEventArgs e) 

 { 

 GridView gview = (GridView)sender; 

 e.Row.Attributes.Add("id", gview.DataKeys[e.Row.RowIndex]["id"].ToString()); 

 } 

This will allow you to dynamically update any row by executing the following javascript:

var id = "idhere"; 

var affectedRow = $get(id); 

A0

animateRow(affectedRow); 

With a few modifications you can get some pretty dynamic per-row animations while letting the AJAX Control Toolkit do all the heavy lifting.A0 Enjoy!