Start Building Professional
Web Apps Today

dhxGrid mouseOver / mouseOut Event

Hello, I am using dhxGrid and trying to change the color of the row when the mouse moves over the specific row and change the color back once the mouse is moved out of that row,
my grid setting is the following, I have attached a grid inside of a dhxtabbar,
following is the current code I have. but the problem with this is that whenever the grid becomes large, the speed it takes for the row to get highlighted becomes longer, (there is a big delay when the record is over 100, because it has to run through all the row)

grids[tabID].attachEvent("onMouseOver",mouseOver);
function mouseOver (row, cell) {
var rowIDs = grids[mytabbar.getActiveTab()].getAllRowIds(",");
var rowIDsplit = rowIDs.split (",");
    
for (var i=0; i <rowIDsplit.length; i++) {
if (rowIDsplit[i].indexOf("header") <= -1 && rowIDsplit[i].indexOf("footer") <= -1){
grids[mytabbar.getActiveTab()].setRowColor (rowIDsplit[i], '#ffffff');}
}    
if (row.indexOf ("header") <= -1 && row.indexOf ("footer") <= -1)
grids[mytabbar.getActiveTab()].setRowColor (row, '#f9f9f9');        
}

I tried putting a "onMouseOut" Event but the following code did not work

grids[tabID].attachEvent("onMouseOut",mouseOut);
function mouseOut (row, cell) {
if (row.indexOf ("header") <= -1 && row.indexOf ("footer") <= -1)
grids[mytabbar.getActiveTab()].setRowColor (row, '#ffffff');        
}

I also tried another way from searching through knowledge base only using mouseOver event to search for mouseover and mouseout event but that also didn't seem to work as the rows either doesn't change color at all or it changes color once and the color never changes back

Is there some way to work around this or I might just be doing something wrong?

Thanks in Advance

>>and trying to change the color of the row when the mouse moves over the specific row and change the color back once the mouse is moved out of that row,
mygrid.enableRowsHover(true,"mycss");

where mycss - name of css class which will be assigned to the row under cursor.

Hi, I've tried the code and it seems to work fine, but I have a new problem

In my grid, I have certain rows that I don't want their color to change when the mouse moves over them,

with the

mygrid.enableRowsHover(true,"mycss");

every row I move the mouse over will change its row css into the "mycss". how can I attach event and function so that when the mouse moves to certain rows it's css doesn't change but on other rows the

mygrid.enableRowsHover(true,"mycss");

still works

 

Thanks in advance.

There is no native API for such modification, the only way to change the way how setRowHover works - code modification ( please inform if you need details about possible modification ) 
Alternatively you can set specific color for row which must be content through cell@style attribute it will override hover class.