Saving DataItem on Tab Drag

[Jaco]

Hi there,

On tab drag i want to update a field in the datasource.  But as soon as datasource sync is called an "Index of undefined" error is received.  This is the sortable section of the tabstrip:

var configureSortable = function () {
            $("#tabstrip ul.k-tabstrip-items").kendoSortable({
                filter: "li.k-item",
                axis: "x",
                container: "ul.k-tabstrip-items",
                hint: function (element) {
                    return $("<div id='hint' class='k-widget k-header k-tabstrip'><ul class='k-tabstrip-items k-reset'><li class='k-item k-state-active k-tab-on-top'>" + element.html() + "</li></ul></div>");
                },
                start: function (e) {
                    tabstrip.activateTab(e.item);
                },
                change: function (e) {
                    var tabstrip = $("#tabstrip").data("kendoTabStrip"),
                        reference = tabstrip.tabGroup.children().eq(e.newIndex);

                    if (e.oldIndex < e.newIndex) {
                        tabstrip.insertAfter(e.item, reference);
                    } else {
                        tabstrip.insertBefore(e.item, reference);
                    }
                },
                move: function(e) {
                    //NOTE: the heading element will be excluded from the
                    //collection as it does not match the filter
                    //e.preventDefault();
                    //shows the original position of the item
                    var originalPos = this.indexOf(e.item);
                    console.log("index of item", originalPos);
                    //shows the position where item will be moved to
                    var newPos = this.indexOf(this.placeholder);
                    console.log("index of placeholder", newPos);
                    //var item = tabStrip.dataSource.at(originalPos);
                    //console.log(item.id + item.pos + item.name + item.status + newPos);
                    //item.set("pos", newPos);
                    //tabStrip.dataSource.sync();
                    var tabstrip = $("#tabstrip").data("kendoTabStrip");
//this gives me a null
                    //var dataItem = tabstrip.dataSource.get(e.item.data("id"));
                    var dataItem = tabstrip.dataSource.at(originalPos);
     //i tried this as well
                    //tabstrip.dataSource.remove(dataItem);
                    //tabstrip.dataSource.insert(newPos, dataItem);
                    dataItem.set("pos", newPos);
                    tabstrip.dataSource.sync();
                }
            });
        };

[Plamen]

Hi,

I have tried to replicate the issue but to no avail. Here is the code that I tried - https://dojo.telerik.com/@zdravkov/AqIMiFiy Would you please try to elaborate the issue by providing the exact runnable example and the steps to observe the issue?

I will be looking forward to your reply.

Regards,
Plamen
Progress Telerik