New to Kendo UI for jQuery? Download free 30-day trial

ListView Integration

You can use the Kendo UI Sortable component to reorder the items in a ListView by dragging and dropping.

Prerequisites

Reordering of Sortable Items

The Sortable reorders the HTML DOM elements. It does not automatically update the order of the items in the DataSource. This means that you have to explicitly implement the desired behavior.

Reordering of ListView Items

To reorder the items of the ListView, initialize the Sortable on the ListView element. Specify the list items using the filter property -- select all elements that are direct children of the ListView content element, for example, .filter(".k-listview-content > div").

Reordering in Editable ListViews

If the editing functionality of the ListView is enabled, use a more specific filter selector that excludes the item which is currently in editing mode, for example, .filter(".k-listview-content > div:not(.k-edit-item)". In this way, the Sortable functionality will not interfere with the editing feature of the ListView.

To reorder the data items of the ListView, use the approach for reordering the Grid data items. For more information on the Sortable events, refer to the Sortable API and the demo on integrating the Sortable with the ListView.

See Also

In this article