This is a migrated thread and some comments may be shown as answers.

Saving DataItem on Tab Drag

1 Answer 52 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Jaco
Top achievements
Rank 1
Jaco asked on 31 Mar 2020, 07:14 AM

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

1 Answer, 1 is accepted

Sort by
0
Plamen
Telerik team
answered on 01 Apr 2020, 11:28 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
TabStrip
Asked by
Jaco
Top achievements
Rank 1
Answers by
Plamen
Telerik team
Share this question
or