I am struggling to find a way to drag and drop multiple rows. If they are non-contiguous i would just put them all together and drop them at the drop target. I'm experimenting with the new RowReordering but cant seem to find a way to have the RowReorderEvent to contain more than one data item. Perhaps this is not the way to go about it so if someone could point me in the right direction that would be great!
NOTE: I have a method for doing this using a wrapper and the drag/drop API, but then i can't get the line indicator to visually show where the rows are being dropped.
I would live with either method above as long as I can drag/drop multiple with an indicator...
Hi Bryan,
Thank you very much for the details provided.
I am afraid that, as of now, there is no built-in approach in our API that would allow the developer to enable a feature that allows the user to drag and drop multiple rows inside the Kendo UI for Angular Grid.
The good news is that there is a logged feature request in our Feedback Portal where we track the customer demand for such a functionality:
It is important to mention that I upvoted this feature request on your behalf as this way, it will gather more popularity and thus will be considered for implementation by our development team.
In the meantime, what I would suggest would be for the developer to explore the API of the built-in Kendo UI for Angular Drag and Drop utility as it might prove to be useful for the implementation of a multiple-row reordering feature:
For your convenience, I am sending you below a StackBlitz demo that demonstrates a possible approach for implementing such a feature that allows dragging and dropping the selected rows in the Grid:
Please, keep in mind that the demo demonstrates a rather custom approach that isn't fully tested and any further customizations are considered the developer's effort.
I hope this helps. Please, let me know if I am missing out on something.
Regards,Georgi
Progress Telerik
Thanks Georgi!
I've been cobbling ideas together here: https://stackblitz.com/edit/angular-dmumgenq?file=src%2Fapp%2Fapp.component.ts
Its doing what i expect now. Would still love to be able to modify the insertion/drop point indicator though so it can be more pronounced. I am not a full time developer so its not immediately obvious to me how to do this, if there is a way!
Thanks again!
Hi Bryan,
Currently, there isn't a built-in approach to customizing the hint lines, but you can use custom CSS to make the line thicker, a different color, or with a bigger width. For example:
https://stackblitz.com/edit/angular-dmumgenq-yadypwig?file=src%2Fapp%2Fapp.component.ts,src%2Fstyles.css
The arrow can also be changed up a bit, and the following structure with classes can be customized:
I hope this helps.
Regards,Yanmario
Progress Telerik