Radgrid Highlight cell on Mouseover

[Pat Huesers]

I am trying to highlight the current cell in a radGrid while mouseover is happening.   For the most part I have it figured out, except for getting the initial background cell color before changing it, so I can change it back on the mouseout event.

Here is my JS.  The row that is not giving me what I need is $LastColor = item.get_cell(cellName).style.background;  It is returning white when it should be getting the cell background color.  What is the correct property to get this?

var $LastColor

       function RowMouseOver(sender, eventArgs) {
           var rowIndex = eventArgs.get_itemIndexHierarchical();
           var item = sender.get_masterTableView().get_dataItems()[rowIndex];
           var cellIndex = eventArgs._domEvent.target.cellIndex;
           var cellName = $find('<%= rgProjectDetails.ClientID%>').get_masterTableView().get_columns()[cellIndex].get_uniqueName();
           $LastColor = item.get_cell(cellName).style.background;
           item.get_cell(cellName).style.background = "red";
       }
       function RowMouseOut(sender, eventArgs) {
           var rowIndex = eventArgs.get_itemIndexHierarchical();
           var item = sender.get_masterTableView().get_dataItems()[rowIndex];
           var cellIndex = eventArgs._domEvent.target.cellIndex;
           var cellName = $find('<%= rgProjectDetails.ClientID%>').get_masterTableView().get_columns()[cellIndex].get_uniqueName();
           item.get_cell(cellName).style.background = $LastColor;
       }

[Jayesh Goyani]

Hello,

.RadGrid .rgHoveredRow
{
 background-color : Red !important; // Your new color
 background-image : none !important; // Remove current image
}

<ClientSettings EnableRowHoverStyle="true">

//OR

.myclass
{
 background-color : Red !important;
}

(by using jquery) Please add this class to your cell on mouse over and remove this class on mouse out.

http://api.jquery.com/addClass/


Thanks,
Jayesh Goyani

[Pat Huesers]

Sorry, I have never used JQuery and can't find an example in the form on how to do this.   I have the CSS changed and the JQuery script loaded in the page, but how do I make the change to the class?  Here is what I have tried.

function RowMouseOver(sender, eventArgs) {
           var rowIndex = eventArgs.get_itemIndexHierarchical();
           var item = sender.get_masterTableView().get_dataItems()[rowIndex];
           var cellIndex = eventArgs._domEvent.target.cellIndex;
           var cellName = $find('<%= rgProjectDetails.ClientID%>').get_masterTableView().get_columns()[cellIndex].get_uniqueName();
           var cell = item.get_cell(cellName);
           $cell.addClass(' highlightcell');

[Jayesh Goyani]

Hello,

function OnRowMouseOver(sender, args) {
               var rowIndex = args.get_itemIndexHierarchical();
               var item = sender.get_masterTableView().get_dataItems()[rowIndex];
               var cellIndex = args._domEvent.target.cellIndex;
               var cellName = $find('<%= RadGrid1.ClientID%>').get_masterTableView().get_columns()[cellIndex].get_uniqueName();
               $(item.get_cell(cellName)).addClass("myClass");
           }

For remove class

$(item.get_cell(cellName)).removeClass("myClass");

CSS Calss

.myclass
{
 background-color : Red !important;
}

Thanks,
Jayesh Goyani