Hello,

Yes, My scenario is talking about dragging multiple parent rows with children from different row groups and dropping into another row group so that both the parent and child items get moved to the target row group.

For Example, Consider I have six-row groups (A, B, C, D, E, F) and I have 10 nested parent-child rows in each of the row groups and I want to move 5 rows (including Parent and child from A group and 5 of the only child rows from B group) to row group D. When I drop it on the Row group D I see out of the 10 items selected the only a couple of items gets moved to the targeted D group and other items are getting moved to different groups (target row is inconsistent when calculated based on the cursor positions).
Is there a way to calculate the target Row besides cursor positions?

Thank you for a quick reply and appreciate the help.

Thanks,

Mani

Hello Viktor,

Unfortunately, I don't have a sample right now and I can provide you the below code snippet at this point and

I have selected multiple rows (single rows as well as grouped rows as part of my scenario when the row group is collapsed I should be able to drag all the child items in the group and when expanded I should be able to drag individual rows as well) using ctrl+select and tried dragging the rows and dropped it on to another row group to which I was actually moving the rows by splicing them from source group.

However, if I drag a single row then the target row is consistent and if I drag multiple rows as mentioned above the target row is changing getting changed and several of the selected items are getting moved to different row groups.

private async moveRow(cursorPosition: Point): Promise<void> {
const targetRow: IgxTreeGridRowComponent = this.catchCursorPosOnElem(this.treeGrid.rowList.toArray(), cursorPosition);
if (!targetRow) { return; }

if(targetRow.isRoot && targetRow.treeRow.level===undefined){
return;
}

if(this.treeGrid.selectedRows.length >1){
console.log(this.treeGrid.selectedRows.length);
console.log('TargetRowMoveRow', targetRow);
this.buildRowsBeforeAssigning(targetRow);
}else{
await this.performDrop(targetRow);
this.localData = [...this.localData];
}
}

private catchCursorPosOnElem(rowListArr: IgxTreeGridRowComponent[], cursorPosition: Point)
: IgxTreeGridRowComponent {
for (const row of rowListArr) {
const rowRect = row.nativeElement.getBoundingClientRect();
if (cursorPosition.y > rowRect.top + window.scrollY && cursorPosition.y < rowRect.bottom + window.scrollY &&
cursorPosition.x > rowRect.left + window.scrollX && cursorPosition.x < rowRect.right + window.scrollX) {
this.targetRowNew = {...row};
return row;
}
}
return null;
}

Thanks,

Mani

Hello Viktor,

you can also find the below snippet in addition to the function I provided above which actually gathers the selected rows and gets filled into a list and then performs the drop.

private async assignRows(moveRows, targetRow){
for(const row of moveRows){
this._draggedRowData = row.rowData;
this._draggedRowParent = row.treeRow.parent;
this._dragRowExpanded=row.treeRow.expanded;
this._dragRowTreeRow=row.treeRow;
this._dragRowHasChild=row.rowData.pickupLevel.length>0;
console.log(row.rowData);
console.log(targetRow.rowData);
console.log('########################');
await this.performDrop(targetRow);
this.localData = [...this.localData];
}
}

private async buildRowsBeforeAssigning(targetRow){
let moveRows=[];
let selectedRows = [];
let selectedRowIndexes = this.treeGrid.selectedRows.filter(rows=>!rows?.rootLevel);
selectedRowIndexes.forEach(sIndex=> {
let row = this.treeGrid.dataView.find(f=>f.rowID.toString() === sIndex.toString());
selectedRows.push(row);
});
selectedRows.sort((a, b) => b.rowID-a.rowID);
selectedRows.forEach(sRows=>{
const currSelectedRow = sRows;
let moveRow={
treeRow:{
level:currSelectedRow?.level,
expanded:currSelectedRow?.expanded,
parent:currSelectedRow?.parent,
data:currSelectedRow?.data
},
rowData:currSelectedRow?.data
};
moveRows.push(moveRow);
});

this.assignRows(moveRows, targetRow);

this.treeGrid.deselectAllRows();
this.dialog.close();
}

Thanks,

Mani