We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
rowDragStart(args){
this.flag_fg=true;
}
rowDrop(args){
if(this.flag_fg){
this.IterateGridRDD(args,"Grid",this.grid);
this.flag_fg = !this.flag_fg;
}
}
. . . . .
IterateGridRDD(args,targetGrid,gridObj){
let targetId = "";
if(!args.target.closest(".e-grid")){
return
}
targetGrid = args.target.closest(".e-grid").id;
let gridSearch = parentsUntil(args.target, targetGrid, true);
let gridInstances:Object ={Grid:this.grid,DestGrid: this.DestGrid,DestGrid2:this.DestGrid2};
let destGrid = gridInstances[targetGrid];
targetId = targetGrid;
if( gridObj.element.id === targetGrid){return;}
if (destGrid) {
const origGrid = gridObj;
origGrid.rowDropSettings.targetID = targetId;
origGrid.notify('rows-removed', { records: args.data }); // remove from source grid
origGrid.notify('model-changed', {
type: 'actionComplete', requestType: 'rowdraganddrop',
});
destGrid.trigger('rowDrop', args);
destGrid.notify('rows-added', { records: args.data });
destGrid.notify('model-changed', {
type: 'actionBegin', requestType: 'rowdraganddrop', // added to destination grid
});
}
args["cancel"]=true;
}
}
|
|
rowDrop(args) {
var rowElement = parentsUntil(args.target, 'e-row') // get corresponding drop row element
args.data['ShipCountry'] = this.grid.getCurrentViewRecords()[parseInt(rowElement.getAttribute('aria-rowindex'))]['ShipCountry'] // change the row drag data value based on the drop value
this.grid.editModule.updateRow(args.fromIndex, args.data); // and then update the data
}
|
|
[app.component.ts]
mouseover(args) {
if (this.flag && this.destGrid.currentViewData.length > 0) {
let row = this.destGrid.element.querySelectorAll('.e-dragborder');
for (let i = 0; i < row.length; i++) {
row[i].classList.remove('e-dragborder');
}
var elem = args.target.classList.contains('e-rowcell') ? args.target.parentElement : parentsUntil(args.target as any, 'e-row');
if (elem && parseInt(elem.getAttribute('aria-rowindex')) >= 0) {
for (let i = 0; i < elem.childNodes.length; i++) {
elem.childNodes[i].classList.add('e-dragborder');
}
}
}
}
|
Wonderful to have the chance to drag and drop with multiple grids.
It's possible to have also a version of the code in React?
Hi Adriano,
Greetings from Syncfusion support.
We have discussed row drag and drop within the grid and inbetween grids in the below documentation and sample in detail. Please refer the below documentation for more details.
Documentation: https://ej2.syncfusion.com/react/documentation/grid/row/row-drag-and-drop
Sample: https://ej2.syncfusion.com/react/demos/#/bootstrap5/grid/row-drag-drop
Regards,
Joseph I.
