Binding Change Event to Sortable TabStrip in Kendo UI

Environment

Product	Version
Progress® Kendo UI® TabStrip	2023.3.1114

Description

I want to fire the change event whenever the user reorders the tabs in the Kendo UI TabStrip. I have enabled the sortable property, but the change event does not seem to get fired when the user moves the tab.

Solution

To bind the change event when the Kendo UI TabStrip is sorted, follow these steps:

1. Initialize the TabStrip with the sortable property set to true:

javascript

$("#tabstrip").kendoTabStrip({
  sortable: true
});

2. Create a client-side reference to the TabStrip's Kendo UI Sortable:

javascript

var tabstripSortable = $("#tabstrip ul.k-tabstrip-items").data("kendoSortable");

3. Bind the change event after initialization to the TabStrip's Kendo UI Sortable:

javascript

tabstripSortable.bind("change", sortable_change);

4. Configure the sortable_change event function:

javascript

function sortable_change(e) {
  console.log("from " + e.oldIndex + " to " + e.newIndex);
}

Here is a Progress Kendo UI Dojo that demonstrates the above steps.