Hello Syncfusion team,
I am currently working on a row numbering column, for which I am trying to cover all grid operations that cause a change to the row order.
Therefore, I also have to find a solution to update my row indices after a row drop. Unfortunately, the only event that is triggered, when a row is dropped, is the rowDrop event.
actionBegin, actionComplete, dataBound etc. do not fire.
So, I was trying to go with the rowDrop event, but this seems to fire before the row is dropped and the data grid and its dataSource are refreshed. That's why I do not have access to the updated grid, which does not allow me to update the row indices accordingly.
See the following example for better understanding: https://stackblitz.com/edit/angular-joxzbn-5efh62?file=app.component.ts
After a row drop, all the row indices are set correctly apart from the two rows that are affected by the row drag and drop.
Is there an event that I am missing to achieve my requirement? Or is it possible to add something like an afterRowDrop event?
Thanks in regard,
Jonas
Hi Jonas,
Greetings from Syncfusion support.
By default in EJ2 Grid, the drag and drop actions done is not updated in the dataSource, it is updated on the UI side only. Inspecting the code example provided we coud see that you are trying to access the data using the dataSource property for getting the rearranged order of the data. We suggest you to use the currentViewRecords
Please refer the below code example.
|
onRowDrop(e) { var rowDetails = this.grid.currentViewData; for (let i = 0; i < rowDetails.length; i++) { (rowDetails[i] as any).rowIndex = i + 1; } this.grid.refreshColumns(); }
|
Sample: https://stackblitz.com/edit/angular-joxzbn-9jik4v?file=app.component.ts,app.component.html
Please get back to us for further details.
Regards,
Joseph I.
This does not work either.
The main problem is the same. I don't have access on the reordered data inside the rowDrop event. I tried it with grid.dataSource, grid.getRows(), grid.currentViewData and grid.getCurrentViewRecords().
In all cases, I got the row data in the order before the drop happened not after. I don't get the updated order, so I cannot update the indices accordingly.
Here is the modified sample: https://stackblitz.com/edit/angular-joxzbn-fcmclt?file=app.component.ts
I also added two console logs with deep copies of the currentViewData and getCurrentViewRecords() to clarify they have not been updated yet in the beginning of rowDrop event.
My guess is still: rowDrop is like a beforeRowDrop and I need an afterRowDrop.
Hi Jonas,
Thanks for your update.
Based on your requirement, you want to update the rearrange the values in the rowIndex column when you drag and drop the rows to a different position. We have achieved your requirement using the rowDrop event where we have implemented the setTimeout to get the data after the drop is performed.
Please refer the below code example.
|
onRowDrop(e) { setTimeout(() => { for (let i = e.fromIndex; i <= e.dropIndex; i++) { console.log(this.grid.getRowInfo(this.grid.getRowByIndex(i))); this.grid.setCellValue( this.grid.getRowInfo(this.grid.getRowByIndex(i)).rowData['slNo'], 'rowIndex', i + 1 ); } this.grid.refresh(); }, 10); }
|
Sample: https://stackblitz.com/edit/angular-joxzbn-gbly7q?file=app.component.ts,app.component.html
Please get back to us for further details.
Regards,
Joseph I.
Hey guys,
please add a afterRowDrop event and dont let us code such strange setTimout stuff!
Or let the values in currentViewData reflect the current state.
Greetings
René
Hi René Fabel,
Currently we are validating the query, we will provide further details on or before Oct 4th 2022. We appreciate your patience until then.
Regards,
Joseph I.
Hi Rene,
We are validating the feesibility of your query, we will provide further details on or before Oct 6th 2022. We appreciate your patience until then.
Regards,
Joseph I.
Rene,
When the row is dropped
the time taken by the row to append on the dropped position may vary and hence it
is not possible to provide an event as this happens only on the UI side.