New to Kendo UI for jQuery? Start a free 30-day trial
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:
- Initialize the TabStrip with the
sortable
property set totrue
:
javascript
$("#tabstrip").kendoTabStrip({
sortable: true
});
- Create a client-side reference to the TabStrip's Kendo UI Sortable:
javascript
var tabstripSortable = $("#tabstrip ul.k-tabstrip-items").data("kendoSortable");
- Bind the change event after initialization to the TabStrip's Kendo UI Sortable:
javascript
tabstripSortable.bind("change", sortable_change);
- 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.