New to Kendo UI for jQueryStart a free 30-day trial

Binding Change Event to Sortable TabStrip in Kendo UI

Environment

ProductVersion
Progress® Kendo UI® TabStrip2023.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
});
  1. Create a client-side reference to the TabStrip's Kendo UI Sortable:
javascript
var tabstripSortable = $("#tabstrip ul.k-tabstrip-items").data("kendoSortable");
  1. Bind the change event after initialization to the TabStrip's Kendo UI Sortable:
javascript
tabstripSortable.bind("change", sortable_change);
  1. 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.

In this article
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support