:: pepysDHTMLX :: mouse over

Discontinued products Uncategorized discussions
#1

I want to set a color for mouse hover for row and column for a grid. Also I want to set a distinct color for the row and the column of a selected cell. How can I do this? Thanks…

#2

You can use enableRowsHover(mode, cssClass) method. This method enable/disable hovering row on mouse over. Parameters here are:
mode - true/false
cssClass - css class for hovering row

.hover {
background-color: navy;
}



To color cell on mouse over you can use:

.grid_hover_cell{
background-color: red;
}



To change style of the selected row and cell you should change following css rule:
div.gridbox table.obj tr.rowselected td.cellselected, div.gridbox table.obj td.cellselected { }- element in a selected cell
div.gridbox table.obj tr.rowselected td {} - elements in a selected row

If you have attached skin to your Grid:
div.gridbox_skinName table.obj tr.rowselected td.cellselected, div.gridbox table.obj td.cellselected { }
div.gridbox_skinName table.obj tr.rowselected td {}

#3

After user moves mouse to another cell, I want to reset the cell back to original state that is remove “grid_hover_cell” class. How do I do that?

#4

The only way - store last visited cell in some var, and from onMouseOver - clear styles of previous cell, before setting styles to the new one.

#5

If a row is selected, then style of selected row overrides the style I assign to the cell on mouse over. Any way I can apply the my style over the selected row style on mouse over?

#6

instead of changing css class, you can change the styles directly. Such styling will not be reset by selection.

was

cell.className="grid_hover_cell";

you can use

cell.style.color = "red";