How to restrict Drag and Drop operation based on DropPosition in TreeGrid
This Knowledge base explains how to restrict Drop operation for specific positions in Tree Grid
Solution: -
Tree Grid Row Drag and Drop feature provides the way to drop the row above, below or child to the target row (i.e. Top segment, bottom segment and middle segment position) with respective to the target row position.
We can restrict Drop operations based on the specific positions using rowDrop event of the Tree Grid.
This is demonstrated in the below sample code in which we have prevented drop action for middleSegment (i.e. prevent drop it as child record of the target row) based on args.dropPosition by setting args.cancel as true using rowDrop event.
JS
let treegrid: TreeGrid = new TreeGrid(
{
dataSource: dragData,
allowRowDragAndDrop: true,
childMapping: 'subtasks',
height: '400',
allowSelection: true,
selectionSettings: { type: 'Multiple' },
treeColumnIndex: 1,
rowDrop: rowDrop,
columns: [
{ field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, textAlign: 'Right', width: 100 },
{ field: 'taskName', headerText: 'Task Name', width: 250 },
{ field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 135, format: { skeleton: 'yMd', type: 'date' } },
{ field: 'endDate', headerText: 'End Date', textAlign: 'Right', width: 135, format: { skeleton: 'yMd', type: 'date' } },
{ field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 120 },
{ field: 'progress', headerText: 'Progress', textAlign: 'Right', width: 120 },
{ field: 'priority', headerText: 'Priority', textAlign: 'Left', width: 135 },
],
});
treegrid.appendTo('#TreeGrid');
function rowDrop(args) {
if (args.dropPosition == "middleSegment") {
args.cancel = true //prevent drop action for middle segment by setting args.cancel as true
}
}
Similarly we can prevent drop action for Top and bottom segment based on args.dropPosition.
Output
Fig 1: Restricted Drag and Drop for middle segment
Sample Links: -
Javascript platform:- JavaScriptDemo
React platform:- ReactDemo
Angular platform:- AngularDemo
Vue platform:- VueDemo
