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.