[Solved] Hover effect for GridButtonColumn

[Markus]

Hello!

How can I add a hover effect to the image of a GridButtonColumn with ButtonType="ImageButton"?

Thanks in advance and Regards Markus

[Princy]

Hello Markus,

You can access the ImageButton in the ButtonColumn and add corresponding attributes to it to add hovereffect to it, as shown below:
aspx:

 <telerik:GridButtonColumn Text="Button" ButtonType="ImageButton" ImageUrl="~/image.gif" HeaderText="ButtonColumn" UniqueName="ButtonColumn">
 </telerik:GridButtonColumn>

cs:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem item = (GridDataItem)e.Item;
            ImageButton btn = (ImageButton)item["ButtonColumn"].Controls[0];
            btn.Attributes.Add("onMouseOver", "this.style.backgroundColor = 'red';");
            btn.Attributes.Add("onMouseOut", "this.style.backgroundColor = '';");
        }
    }

Thanks
Princy.

[Markus]

Hello Princy,

I get it work, thanks!

Regards Markus

[Rishi]

Hi 

Is this the only way we can edit the style/ attributes on the image button ? Can we do it from the client side ?

[Princy]

Hi Rishi,

Please try the following code snippet to set Hover-style from client side.

ASPX:

<ClientSettings>
    <ClientEvents OnRowMouseOver="RowMouseOver" OnRowMouseOut="RowMouseOut" />
</ClientSettings>

JS:

<script type="text/javascript">
    function RowMouseOver(sender, args) {
        var i = args._itemIndexHierarchical;
        var MasterTable = sender.get_masterTableView();
        var image = MasterTable.get_dataItems()[i].findElement("UniqueName");
        image.style.backgroundColor = 'red';
    }
    function RowMouseOut(sender, args) {
        var i = args._itemIndexHierarchical;
        var MasterTable = sender.get_masterTableView();
        var image = MasterTable.get_dataItems()[i].findElement("UniqueName");
        image.style.backgroundColor = '';
    }
</script>

Thanks,
Princy

[Richard]

How can I do the same thing for a button type "PushButton"? 

[Richard]

Your example showed mouser over option for Image button - I there a similar option for PushButton

protected void radGrid_ItemDataBound(object sender, GridItemEventArgs e)
       {
           if (e.Item is GridDataItem)
           {
               GridDataItem item = (GridDataItem)e.Item;
               ImageButton btn = (ImageButton)item["ButtonColumn"].Controls[0];
               btn.Attributes.Add("onMouseOver", "this.style.backgroundColor = 'red';");
               btn.Attributes.Add("onMouseOut", "this.style.backgroundColor = '';");
           }
       }

[Princy]

Hi Richard,

You can obtain the same for a PushButton type. Just access the control as Button in code-behind instead of the ImageButton as follows:

C#:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
  if (e.Item is GridDataItem)
  {
    GridDataItem item = (GridDataItem)e.Item;
    Button btn = (Button)item["ButtonColumn"].Controls[0];
    btn.Attributes.Add("onMouseOver", "this.style.backgroundColor = 'red';");
    btn.Attributes.Add("onMouseOut", "this.style.backgroundColor = '';");
  }
}

Thanks,
Princy