https://stackblitz.com/edit/react-zbhrxe?file=Hello.js
how can i drag a particular field in the same row, in the grid with using the reorder function.
in my grid i have star icon, which drags the entire column vertically but my requirement is to drag that star horizontally with in a particular grid column.
5 Answers, 1 is accepted
Hello,
The Grid has a built-in column reordering functionality. Please take a look at the following article and demo:
https://www.telerik.com/kendo-react-ui/components/grid/columns/reordering/
Regards,
Stefan
Progress Telerik
Rank 2
that's helps!. but i don't need like that. actually i have to re-arrange the values of the entire row, Example i have an start icon on my grid i want move that icon to under the job title field.. like an calendar scheduler(not mean that.)
https://stackblitz.com/edit/react-zbhrxe?file=Hello.js
Hello,
I would like to clarify some things before proceeding.
1) Does only the icon(star) element has to be moved across the columns?
2) If the entire column value has to be moved, would that create an incorrect Grid as we will have cases from the example the "Equipment Code" will be under the "Equipment Name"?
I will be expecting the additional details and proceed with suggesting how it can be done.
Regards,
Stefan
Progress Telerik
Rank 2
Please see the attachment, that's what i'm trying to achieve.
In my attachment there is a rounded icon which corresponds to a date(Monday).And i want to drag and drop the icon to a new date(Tuesday) within the same row.Column wise drag and drop is not allowed.....This is what i'm trying to achieve and i'm eager to know whether this can be achieved using kendo.
https://stackblitz.com/edit/react-zbhrxe?file=Hello.js
Any help is appreciated.
Thankyou
Hello,
There are a couple of approaches that can be used in this case:
1) Use the dragEnd event to get the element where the icon was dropped. Then programmatically append the icon element inside the td where it was dropped.
2) Render icons inside all cells and show and hide them based on dynamically changed classes which will make them visible.
Additionally, as based on the picture this seems like scheduling functionally, please check our Scheduler component, which has this drag and drop supported out of the box and has a view that covers the days of the week. It can prove as a better solution in this case:
https://www.telerik.com/kendo-react-ui/components/scheduler/
Regards,
Stefan
Progress Telerik