Change visibility of GridEditCommandColumn image on row mouseover

[Steve Y]

I have GridEditCommandColumn with an image in it that I want to be invisible until I mouseover anywhere in its row.

I've been messing with cssclass and with the OnRowMouseOver client event but I've not been able to work it out.

Does anyone have the magic incantation I can use...

Thanks, Steve

[Shinu]

Hi Steven,

You can try the following code snippet to achieve the desired scenario.

ASPX:

<telerik:GridEditCommandColumn UniqueName="EditCol" Display="false" ></telerik:GridEditCommandColumn>

<ClientEvents   OnRowMouseOver="OnRowMouseOver" />

JS:

 <script  language="javascript" type="text/javascript">
   function OnRowMouseOver(sender, eventArgs)
   {
     var grid= $find("<%=RadGrid1.ClientID %>");
     var index =eventArgs.get_itemIndexHierarchical();
     var gridgridRow=grid.get_masterTableView().get_dataItems()[index];
     var cell = grid.MasterTableView.getCellByColumnUniqueName(gridRow,"EditCol");
     cell.style.display = "block";

   }
 <script />

Regards
Shinu.

[Steve Y]

Hi Shinu,

Thanks for the swift reply. I tried the code and it doesn't quite do what I want.

First. I want the GridEditCommandColumn to take up the appropriate space in the grid (i.e. in my case 20px) but I want the image contained within it to be invisible. By setting Display="false", the column itself is not rendered initially.

The second problem was that when I hovered over a row, the event fired ok, but I got the following Javascript error.

eventArgs.get_itemIndexHierarchical is not a function

Any ideas?

Steve

[Shinu]

Hi Steven,

Are you using RadGrid for asp.net or RadGrid for asp.net AJAX? The above given code is for AJAX version.

Shinu.

[Steve Y]

I'm a relatively new customer of these controls and I'm on the latest version of ASP.NET AJAX 2008.2.915 35. I'm running .net 3.5 SP1 which is why I have the newer hotfix version of the controls.

[Steve Y]

Does anyone know why the code Shinu proposed doesn't work for me. It triggers on a mouseover but I get the javascript error

eventArgs.get_itemIndexHierarchical is not a function

Thanks, Steve

[Steve Y]

ok. I came at it a different way based on some code I found in the code library. Here it is if anyone would like to use it.

I basically hide the edit and delete buttons (I'm using the pen and trashcan images) until I mouseover the relevant row. It keeps the grid nice and clean but makes it easy to click on edit or delete for each row.


ASPX for the RadGrid

<ClientSettings>         <ClientEvents OnRowMouseOut="rowMouseOut" OnRowMouseOver="rowMouseOver" /> </ClientSettings> <MasterTableView etc etc etc >     <ItemStyle CssClass="RowMouseOut" />     <AlternatingItemStyle CssClass="RowMouseOut" />

Javascript

function rowMouseOver(sender, eventArgs) {     $get(eventArgs.get_id()).className = $get(eventArgs.get_id()).className.replace("RowMouseOut", "RowMouseOver"); } function rowMouseOut(sender, eventArgs) {     $get(eventArgs.get_id()).className = $get(eventArgs.get_id()).className.replace("RowMouseOver", "RowMouseOut"); }

Css

/* Makes the edit and delete images in a Grid Item visible or hidden */ /* See javascript rowMouseOver and rowMouseOut */ .RowMouseOver td input  {    visibility:visible !important;  }    .RowMouseOut td input  {    visibility:hidden !important;

[Saranya]

Hi
      I have tried the above piece of code for hiding the edit image and visible it on moveover.but my requirment is i need to hide the entire GridEditCommandColumn (including the header).i tried the shinu solution by making the display="false" but am facing some alignment issues -grid row is flickering.steve's final solution is working fine but i need to hide entire column.is it possible?

[Marin]

Hello,

 You can try the hideColumn client-side method of the MasterTableView as shown here:
http://www.telerik.com/help/aspnet-ajax/grid-gridtableview-hidecolumn.html 

Kind regards,
Marin
the Telerik team