Data Binding

Updated on Mar 20, 2026

The Sortable supports two data binding approaches—automatic binding with kendoSortableBinding and manual binding with data. Both accept arrays of strings or objects.

Automatic Binding with the Built-In Directive

To bind data automatically, set kendoSortableBinding to your data array. The directive tracks all drag-and-drop operations and updates the array for you. No extra event handling is required.

Change Theme

Theme

Loading ...

This approach is a good fit when you:

• Reorder items without custom logic.
• Transfer items between multiple lists through the zone property.
• Need the data array to stay in sync without manual event handling.

Manual Binding with the Data Property

To bind data manually, set the data property to your array and handle the dragOver and navigate events yourself. Inside each handler, call moveItem() on the Sortable instance to apply the reorder.

Change Theme

Theme

Loading ...

This approach is a good fit when you:

• Validate or cancel a move before it applies.
• Run side effects such as API calls on each reorder.
• Apply conditional rules that determine whether an item can move.

Suggested Links

• Sortable Items
• API Reference of the SortableBindingDirective
• API Reference of the SortableComponent