Cannot D&D in grid with CellSelectionModel

[Domi]

First off: Nice work with this framework! It seems really comfortable, judging from my first 2 days of working with it :)

I encountered a problem with the CellSelectionModel though. The EditorGrid e.g. by default uses the CellSelectionModel, rather than the RowSelectionModel. This model cannot be used with the grid's enableDragDrop : true - option:
It will raise the following error: sm.isSelected is not a function in the getDragData() - function when starting to drag a row (or rather cell).

Intializing the grid:


var grid = new Ext.grid.EditorGrid(Ext.get(this.id), {
ds: ds,
cm: cm,
//enableColLock:false,
enableColumnMove : true,
enableDragDrop : true
});


The EditorGrid's CellSelectionModel just does not have the isSelected()-method.

I suggest to give the choice of -by default- either drag complete rows or single cells when fixing the CellSelectionModel to work with D&D.


If you want to use D&D in your EditorGrid, use a simple work-around: Supply a RowSelectionModel to the ctor, by adding the following Config-Option:


sm: new Ext.grid.RowSelectionModel()

[TaunT]

hi, I have the same problem
use CellSelectionModel && enableDragDrop, but it dos't work :(
year of the post 2007 ! it's stiil not solved? table has three columns, I want to do that dragging only works if the user clicks the mouse on one of them

need help )

----
sorry for bad english :)

[Condor]

Are you still using Ext 1.x? Or are you using Ext 2.x or 3.x?

ps. CellSelectionModel is still using the cellmousedown event in all Ext versions, which effectively kills D&D.
You could override CellSelectionModel.initEvents to make it use the cellclick event instead.

[TaunT]

tried this on extjs 2.2 & on extjs 3.0

[TaunT]

var grid = new Ext.grid.GridPanel({
id: 'gridPanel',
renderTo: 'mainPanelGrid',
enableDragDrop: <?=($this->arrayGridSettings["enableDragDrop"]?"true":"false");?>,
ddGroup: 'mygrid-dd',
ddText: '<?=SYSTEM_MODULE_CORE_GRIDPANEL_DND?>',
enableHdMenu: false,
frame: false,
border: false,
autoHeight: true,
autoWidth: true,
store: store,
autoExpandColumn: 'name',
autoExpandMin: 300,
autoExpandMax: 700,
layout:'fit',
trackMouseOver: false,
cm: cm,
viewConfig: {
forceFit: true,
autoScroll: true,
getRowClass: function(record, index) {
if(index%2>0) rowcls='grid-row-selected';
else if(index==<?=($this->gridRowsCount-1)?>) rowcls='grid-row-end';
else rowcls='';
return rowcls;
}
}
,sm: new Ext.grid.CellSelectionModel({
listeners: {
cellselect: function(sm, iRow, iCell){
if (iCell!=0) sm.clearSelections();
},
}
})
});

var ddrow = new Ext.dd.DropTarget(grid.getView().mainBody, {
ddGroup : 'mygrid-dd',
notifyDrop : function(dd, e, data){
var sm = grid.getSelectionModel();
var rows = sm.getSelections();
var cindex = dd.getDragData(e).rowIndex;

var record = store.getAt(cindex);
var row1 = record.get('id');
var sorttype1 = record.get("sorttype");

if (sm.hasSelection()) {

for (i = 0; i < rows.length; i++) {
sorttype2=store.getById(rows[i].id).data.sorttype;
if (sorttype1==sorttype2) {
store.remove(store.getById(rows[i].id));
store.insert(cindex,rows[i]);
row2=store.getById(rows[i].id).data.id;
}
}
if (sorttype1==sorttype2) {
Ext.Ajax.request({
url: '<?=$this->arrayGridSettings["sortLinkDND"];?>',
params: {itemid_from: row2, itemid_to: row1 <? foreach ($this->arrayGridSettings["sortAdds"] as $key=>$sortAdd) {echo ", ".$key.": '".$sortAdd."' ";} if ($this->arrayGridSettings["sorttype"]) {echo ", sorttype: "?>sorttype1<?;} ?>}
});
sm.selectRecords('');
}
}

// new classes after d&d
for(i=0; i<gridData.length; i++) {
var row = grid.getView().getRow(i);
var element = Ext.get(row);
if (i%2==0) {
if(i!=<?=($this->gridRowsCount-1)?>) {
element.removeClass('grid-row-end');
element.removeClass('grid-row-selected');
} else {
element.removeClass('grid-row-selected');
element.addClass('grid-row-end');
}
} else {
element.removeClass('grid-row-end');
element.addClass('grid-row-selected');
}
}
}

});

[Condor]

Try:

sm: new Ext.grid.CellSelectionModel({
initEvents : function(){
this.constructor.prototype.initEvents.call(this);
this.grid.un("cellmousedown", this.handleMouseDown, this);
this.grid.on("cellclick", this.handleMouseDown, this);
},
...
})

[TaunT]

d.isSelected is not a function

[TaunT]

why developers of ExtJS can't make listeners "cellselect"
and in handleMouseDown : function(g, rowIndex, e) include cellIndex ?

[TaunT]

I think I had explained that I wanted
I need to drag-and-drop the rows will only work if the user click on one of the cell in row, but not for any

[rob1308]

Hi Taunt,

Have a look at this post.

https://extjs.com/forum/showthread.php?t=6832

This helped me get an editable grid with drag and drop.

Hope it helps you too.

R.

[Izhaki]

Perhaps this related thread (http://extjs.com/forum/showthread.php?p=374442#post374442) could be of help?