Start Building Professional
Web Apps Today

Hi,

I'm want to draw draw a cross line on the grid to know location of cell the mouse overed, so, I create the followings code.

mygrid.attachEvent("onMouseOver",function(row_id,cell_id,e){
  
 if(cell_id>0){
   //row_id: TP012017
   var colsNum = mygrid.getColumnsNum();
   var disableColumns = mygrid.getUserData(row_id, "disable");
   //mygrid.setSkin("sds");
     
   mygrid.forEachRow(function(id) {   
    for(i=1;i<colsNum;i++) {
     if(id == row_id){//current row id == selected row id
      if(disableColumns.indexOf(id)>-1){
       mygrid.setCellTextStyle(id,i,"background-color:#dedee3; background-image:url(/img/sds/bg_th5.gif);");
      }       
      mygrid.setCellTextStyle(id, i, "border-bottom-width:2px;border-bottom-color:#545454;");
     }
     else
     {//init of general cells
      mygrid.setCellTextStyle(id,i, "");
     }
    }
    mygrid.setCellTextStyle(id, cell_id, "border-left-width:2px;border-left-color:#545454;");
   }); 
   
   mygrid.setCellTextStyle(row_id,cell_id, "border-left-width:2px;border-left-color:#545454;border-bottom-width:2px;border-bottom-color:#545454;");
   
 }
 });

But, Its speed is not good.

Do you have a great idea to enhance this speed or to know location of cell mouse overed?

help me..T_T;;;

You can enable light mouse navigation and change style for the selected cell and row:

mygrid.enableLightMouseNavigation(true);

<style>

<!-- elements in a selected row-->
div.gridbox table.obj tr.rowselected td{
 border-bottom: 2px solid red;
}

<!-- element in a selected cell-->

div.gridbox table.obj tr.rowselected td.cellselected, div.gridbox table.obj td.cellselected {

border-bottom: 2px solid green;

}
</style>

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{

More information about grid's appearance you can find here http://dhtmlx.com/docs/products/dhtmlxGrid/doc/articles/Creating_custom_skin.html#grid_cust_skin