New to Kendo UI for Angular? Start a free 30-day trial

Data Binding

The Sortable enables you to bind it to an array of strings or objects, as well as to use its built-in directive to decrease the repetitive boilerplate code.

Binding to Arrays of Strings and Objects

You can set the data property of the Sortable component to an array of strings or objects.

Sorting items by using either drag-and-drop operations or the keyboard navigation will emit events, such as dragStart, dragOver, dragEnd, and others. The events provide the necessary information for manipulating the dataset manually or through the API of the Sortable.

Example
View Source
Change Theme:

Using the Built-In Directive

The Sortable provides the built-in SortableBindingDirective directive, which simplifies the handling of data operations by cutting down the repetitive boilerplate code.

The SortableBindingDirective will seamlessly keep the Sortable items and the data array that is passed to it in sync.

The following example demonstrates how to set up the binding.

Example
View Source
Change Theme: