Hi,
I have a scenario where I have to drag multiple rows from a row group A and drop them at a different location in row group B in the same tree grid and I tried to get the target row location through IDropDroppedEventArgs using the below positions
Hello Mani,
I have created a small sample using your approach and trying to reproduce the described behavior. On my side everything works as expected and when I am trying to move multiple rows to another parent the TargetRow is consistent.
This is my sample for your reference. Please test it on your side and let me know how it behaves. If this is not an accurate demonstration of what you are trying to achieve, please feel free to modify it and send it back to me along with steps to reproduce. Alternatively, if the behavior cannot be replicated, please feel free to provide your own sample.
Thank you for your cooperation.
Looking forward to hearing from you.
Regards,Viktor KombovEntry Level Software DeveloperInfragistics, Inc.
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
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; }
If you are using Row Reordering Demo in Tree Grid Row Drag topic, could you please elaborate on how do you perform a multiple row drag? Are you attaching the rows programmatically? And when you are dragging only one row is TargetRow is consistent or not?
In order to be able to assist you further could you please provide me with a sample or a code snippet that replicates the issues you are facing? Having a sample, which I can debug on my side, will be highly appreciated and extremely helpful for providing you with solution as soon as possible.
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.