This is a migrated thread and some comments may be shown as answers.

Drag drop event to get new order of cards.

4 Answers 7 Views
Card
This is a migrated thread and some comments may be shown as answers.
Phil
Top achievements
Rank 1
Veteran
Iron
Phil asked on 02 Dec 2020, 10:14 AM

Hi 

I have implemented the card UI and have the drag and drop working using the example script

$(document).ready( function () { $("#list").kendoSortable({ filter: ".k-card", cursor: "move", placeholder: function (element) {return element.clone().css("opacity", 0.1);}, hint: function (element) {return element.clone().css("width", element.width()).removeClass("k-state-selected");}});});

I want to be able to save the new order if the user drags and drops and item.

Is there an event to know when a drag and drop action has occurred.

Then I can loop through a class in javascript and grab the order from the ids or a data attribute to re-order the items.

Many thanks

4 Answers, 1 is accepted

Sort by
0
Accepted
Tsvetomir
Telerik team
answered on 07 Dec 2020, 09:39 AM

Hi Phil,

The Sortable widget exposes the change event that can be used to track when the item has been dropped. We have an example that demonstrates how to persist the order of the items of the Sortable widget:

https://docs.telerik.com/kendo-ui/controls/interactivity/sortable/how-to/persist-order-in-localstorage

The same exact approach can be replicated in an ASP.NET Core environment.

 

Kind regards,
Tsvetomir
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Phil
Top achievements
Rank 1
Veteran
Iron
answered on 10 Dec 2020, 10:29 AM
That is exactly what I was looking for thank you.
0
Phil
Top achievements
Rank 1
Veteran
Iron
answered on 10 Dec 2020, 10:47 AM

I have another question related to this.

My cards have a scroll, clicking and dragging by default doesn't scroll. 

Is there any built in method/way to allow for vertical scrolling when clicking and dragging a card. 

Or would I need to add some custom jquery that does something like.

If mouse clicked and cursor near the top/bottom of screen scroll?
Remove styles to stop text highlighting etc.

Thanks

0
Tsvetomir
Telerik team
answered on 14 Dec 2020, 04:37 PM

Hi Phil,

In order to scroll during a reorder of the items, you should set the AutoScroll property to true:

https://docs.telerik.com/kendo-ui/api/javascript/ui/sortable/configuration/autoscroll

 

Regards,
Tsvetomir
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Card
Asked by
Phil
Top achievements
Rank 1
Veteran
Iron
Answers by
Tsvetomir
Telerik team
Phil
Top achievements
Rank 1
Veteran
Iron
Share this question
or