[Solved] Dropped item shown twice after change event

[Alon]

I use a Kendo Sortable in 3 different places in my app. It has always worked flawlessly for me however recently I upgraded to Kendo 2019.1.115 and ONE of the kendo sortables has stopped working correctly.  I know the issue isnt kendoSortable since its working fine elsewhere. 

 

Here is the behavior I have seen. Before the drag begins this is what I have

https://screencast.com/t/Ov6mXlaqKw

Now if I drag Chilly to below Fresh Lemon I end up with the following

https://screencast.com/t/8UDK6LKmANK

The item that was dragged appears twice at the end of the list. I wrote out the source in the change event and it is correct. It shows 

https://screencast.com/t/JTcjSE7aj80h

As you can see the data is correct. The problem is that the kendoSortable isnt showing what is in the data model.

Here is my code and template:

<script type="text/x-kendo-tmpl" id="tmplMenuOptionsGroupRow">
    <div class="d-flex optionRow">
        <div class="pl-2 col-1">
            <i class="fal fa-arrows fa-2x dragHandler"></i>
        </div>
        <div class="col-5 modifierDesc">
            <input name="optionDesc" class="form-control k-textbox k-input-lg"
                data-bind="value: description, disabled:legacy, events:{change: editorModel.menuOptionGroup.onMenuItemOptionsGroupChange}" />
        </div>
        <div class="col-4 optionPrice dragHide">
            <input class="k-input-lg" data-role="numerictextbox"
                data-format="c"
                data-min="0"
                data-format="c2"
                data-spinners=false
                data-bind="value:price, disabled:legacy, events:{change: editorModel.menuOptionGroup.onMenuItemOptionsGroupChange}" />

        </div>
        <div class="dragHide optionDelete col-1" >
            <button type="button" class="btn btn-danger btn-sm" data-bind="click:editorModel.menuOptionGroup.deleteOption, disabled:legacy"><i class="fal fal fa-trash-alt"></i>
            </button>
        </div>
    </div>
</script>

 

$("#optionGroupItems").kendoSortable({
    cursor: "move",
    holdToDrag: false,
    autoScroll: true,
    ignore: 'input, button',
    handler: '.dragHandler',
    // move: function (e) {
    //     console.log('moving');
    // },
    placeholder: function (element) {
        console.log("placeholder");
        return element.clone().css({
            "opacity": 0.3,
            "border": "1px dashed #000000"
        });
    },
    hint: function (element) {
        return null;

    },
    change: function (e) {
        console.log('drop/change');

        var oldIndex = e.oldIndex;
        var targetIndex = e.newIndex;

        console.log('BEFORE Update');
        _.each(self.editorModel.menuOptionGroup.options, function(anOption){
            console.log(anOption.description);
        });

        self.editorModel.menuOptionGroup.options.splice(targetIndex, 0, self.editorModel.menuOptionGroup.options.splice(oldIndex, 1)[0]);
        //after the splice
        console.log("");
        console.log('AFTER Update');
        _.each(self.editorModel.menuOptionGroup.options, function(anOption){
            console.log(anOption.description);
        });

        // console.log(self.editorModel.menuOptionGroup.options);
    }
});

 

 

 

[Alon]

I am posting a reply in case anyone has a same/similar issue.

It turns out that my items were in a containing DIV. I forgot to set the data-role=listview on this. Once I did this everything started working. What tipped me off was inspecting the elements did not have a data-uid attribute so there was no connection to the observable. Once I set that all was well.