This is a migrated thread and some comments may be shown as answers.

Change visibility of GridEditCommandColumn image on row mouseover

8 Answers 155 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Steve Y
Top achievements
Rank 2
Steve Y asked on 19 Sep 2008, 03:34 AM
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

8 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 19 Sep 2008, 05:56 AM
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.
0
Steve Y
Top achievements
Rank 2
answered on 19 Sep 2008, 06:52 AM
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

0
Shinu
Top achievements
Rank 2
answered on 19 Sep 2008, 07:03 AM
Hi Steven,

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

Shinu.
0
Steve Y
Top achievements
Rank 2
answered on 19 Sep 2008, 07:11 AM
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.
0
Steve Y
Top achievements
Rank 2
answered on 21 Sep 2008, 05:25 AM
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
0
Steve Y
Top achievements
Rank 2
answered on 22 Sep 2008, 06:45 AM
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;
0
Saranya
Top achievements
Rank 1
answered on 18 Jun 2012, 02:07 PM
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?
0
Marin
Telerik team
answered on 21 Jun 2012, 07:40 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Grid
Asked by
Steve Y
Top achievements
Rank 2
Answers by
Shinu
Top achievements
Rank 2
Steve Y
Top achievements
Rank 2
Saranya
Top achievements
Rank 1
Marin
Telerik team
Share this question
or