How to change image in MouseOver Event in the Row of RadGrid?

[Eduardo Chiletto]

Hi!

I need to make the image of an ImageButton in a ColumnTemplate  placed on the grid is replaced by another when  the MouseOver event occurrs. 

Somebody help-me?

[Princy]

Hello,
If you want to change the image OnRowMouseOver, then attach the OnRowMouseOver event and try out the following client side code.

JavaScript:

<script type="text/javascript">
    function OnRowMouseOver(sender, args)
    {
        var i = args._itemIndexHierarchical;
        var MasterTable = sender.get_masterTableView();
        var image = MasterTable.get_dataItems()[i].findElement("ImbBtn");
        image.src = '../Images/ANTON.jpg';
    }
    function OnRowMouseOut(sender, args)
   {
        var i = args._itemIndexHierarchical;
        var MasterTable = sender.get_masterTableView();
        var image = MasterTable.get_dataItems()[i].findElement("ImbBtn");
        image.src = '../Images/tabSelected.jpg';
    }
</script>

And if you want change the image on mouse hovering the image itself, then the following code will be helpful.
C#:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
   {
       if (e.Item is GridDataItem)
       {
           GridDataItem item = (GridDataItem)e.Item;
           ImageButton img = (ImageButton)item.FindControl("ImbBtn");
           img.Attributes.Add("onmouseover", "this.src='../Images/ANTON.jpg'");
           img.Attributes.Add("onmouseout", "this.src='../Images/tabSelected.jpg'");
       }
   }

Thanks,
Princy.

[Eduardo Chiletto]

Thanks, Princy.

It was exactly what I needed.