Start Building Professional
Web Apps Today

:: pepysDHTMLX :: mouse over

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..

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
<style>
 .hover {
  background-color: navy;
 }
</style>
<script>
  mygrid.enableRowsHover(true,"hover");
</script>

To color cell on mouse over you can use:
<style>
.grid_hover_cell{
 background-color: red;
 }
</style>
<script>
mygrid.attachEvent("onMouseOver",function(rowId,cellInd){
  var c=mygrid.cellById(rowId,cellInd).cell.className="grid_hover_cell";
  return true;
  });
</script>

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 {}