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);
}
});