MVVM sortable, data templating (phantom items being created)

5 posts, 0 answers
  1. David
    David avatar
    12 posts
    Member since:
    May 2013

    Posted 19 Jun 2018 Link to this post

    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? 

     

  2. Stefan
    Admin
    Stefan avatar
    2952 posts

    Posted 21 Jun 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. David
    David avatar
    12 posts
    Member since:
    May 2013

    Posted 21 Jun 2018 in reply to Stefan Link to this post

    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. 

     

     

  4. Stefan
    Admin
    Stefan avatar
    2952 posts

    Posted 22 Jun 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. David
    David avatar
    12 posts
    Member since:
    May 2013

    Posted 22 Jun 2018 in reply to Stefan Link to this post

    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

Back to Top