MVVM sortable, data templating (phantom items being created)

[David]

So I have provided a dojo of the problem in action. Not sure what is going wrong or how to fix it. http://dojo.telerik.com/aFiKaJEK

 

I have cut out the rest of the controls and limited it to a sortable list with some items. 

 

What should happen: 

When moving the items up/down the list it should reorder the datasource "Columns" so that the order reflects what is on the screen (as this will be saved back at some point) 

When reordering the items the vm list is the correct size and in the correct order but the templating is adding a "phantom/duplicate" item on the screen. Is this by design or am I doing something wrong. 

 

If you press the x to remove items from the datasource this again is updating correctly but as soon as there is an interaction with moving items around the collection it will add these duplicate items to the screen. 

 

Any advice on how I can resolve this? 

 

[Stefan]

Hello, David,

Thank you for the provided example.

The undesired result occurs, because the widget will automatically, remove the item from the UI and place it in the new position and the data operation will do it again.

Currently, there are two options:

1) Prevent the end event, as this will only take the custom reordering into account and will prevent the automatic reordering done by the widget. Still, this will create a visual effect that could be considered confusing:

http://dojo.telerik.com/aFiKaJEK/2

https://docs.telerik.com/kendo-ui/api/javascript/ui/sortable/events/end

2) Leave the DOM reordering to be done by the widget and only keep the reordered items in a separate collection which will not be shown and save that collection instead of the displayed one.

I hope one of the approaches to prove helpful.

Regards,
Stefan
Progress Telerik

[David]

Hi Stefan, 

Thanks for the reply. 

I actually went down a slightly different route before you responded after I figured out what was happening with the binding. 

rather than target the end event I used the change event instead and forced the columns collection to "trigger" the change event so it functioned as i would expect it to and not have any confusing visual effects. 

 

Creating a duplicate collection would also not be ideal as I could have a list that contains hundreds of items potentially and so bloating the vm which is getting fairly large already. 

 

On a side note Stefan, Outlook 2016 is displaying your avatar in full screen so squishing your responses to the right hand side of the screen. 

 

 

[Stefan]

Hello, David,

I'm glad to hear that the desired result is achieved. The used approach is very good, in many cases, there are different approaches that could be used and I'm glad that you have found and shared it with us.

As for the picture, it is a known issue and the team is working on it. For now, it was only reported with MacOS devices, could you please confirm if this is the case now and not.

Regards,
Stefan
Progress Telerik

[David]

I am using Windows 8.1 Enterprise and also Windows 10 Enterprise. (both using Office 2016 x64)

 

I also forgot to add the updated dojo to my last post. So here is it http://dojo.telerik.com/aFiKaJEK/3