Start Building Professional
Web Apps Today

Select just one single cell in "blockselectionmode"

I have block selection mode working, which works well for selecting blocks, and can select one cell only if I drag a box within it. I want to be able to select a single cell by simply clicking it once (and still be able to make larger selection blocks normally).

The block selection has hardcoded check to prevent small area selection

dhtmlxgrid_selection.js, line 106

if ((Math.abs(this._init_pos[0]-X)<5) && (Math.abs(this._init_pos[1]-Y)<5)) return this._HideSelection();

you can try to comment this line.

I commented that line, but it does not allow me select a single cell by simply clicking on it once... I still have to drag the mouse within the cell to highlight it.

Please check attached sample.

Hi,
I have the same requirement (do a single cell block select on click), but i don't really understand whats going on in this example.

I think you made modifications to the dhtmlx source but i'm not sure what exactly you changed since i'm based on the 2.0 version and there are more than 1 differences in the files in the example and the files i have.

Would there be a better solution that wouldn't required modifying (and maintaining everytime we upgrade) the library code?
If not, would you tell me exactly what to add and change?

Thank you,

-Alim

Same as in above case, line 107 need to be commented in dhtmlxgrid_selection.js 
       if ((Math.abs(this._init_pos[0]-X

>>Would there be a better solution that wouldn't required modifying
It possible to create a block selection programmatically by using onRowSelect event and related API, but it will require some lines of complex code, while above solution, just disable inner check inside existing code. 

You can achieve the same effect without code modification as

grid._OnSelectionMove_b=grid._OnSelectionMove;
grid._OnSelectionMove=function(){
     grid._init_pos=[999999,999999];
     grid._OnSelectionMove_b.apply(this,arguments);
}

More importantly, I think we also need to add the following.

    thegrid._OnSelectionStart_b=thegrid._OnSelectionStart;
    thegrid._OnSelectionStart=function(){
        thegrid._OnSelectionStart_b.apply(this,arguments);
        thegrid._OnSelectionMove.apply(this,arguments);
    }

Does it make sense?
-Alim

The original update makes possible to select single cell, by removing the minimum select check 
Code which you are proposing, will create block selection directly on mouse down - if it is a desired usecase , than such modification need to be added as well. 

I'm still having problems with the code above. I added the following code to my grid. It works fine at first. But when i click on a region which is already selected, i get some weird behaviour and i weird selected region.

thegrid.enableBlockSelection(true);

thegrid._OnSelectionMove_b=thegrid._OnSelectionMove;

thegrid._OnSelectionMove=function(e){

var ee = e || window.event;

// only if its not a right click (button == 2)

if ( ee.button != 2 ){

thegrid._init_pos=[999999,999999];

thegrid._OnSelectionMove_b.apply(this,arguments);

}

}

thegrid._OnSelectionStart_b=thegrid._OnSelectionStart;

thegrid._OnSelectionStart=function(e){

var ee = e || window.event;

// only if its not a right click (button == 2)

if ( ee.button != 2 ){

thegrid._OnSelectionStart_b.apply(this,arguments);

thegrid._OnSelectionMove.apply(this,arguments);

}

}

 

 

Is there anything missing?

-Alim

Problem confirmed

As quick fix, you can use

thegrid._OnSelectionMove=function(e){
  var ee = e || window.event;
  // only if its not a right click (button == 2)
  if ( ee.button != 2 ){
      if ((ee.target||ee.srcElement).className!="dhtmlxGrid_selection")
      mygrid._init_pos=[999999,999999];
  mygrid._OnSelectionMove_b.apply(this,arguments);
  }

Added check will block single selection behavior when click occurs other existing selection

It works well.

Thank you,

-Alim