Reorder Selected Items
The following example demonstrates how to use the Kendo UI Sortable to reorder the selected values in a Kendo UI MultiSelect widget.
Example
<div id="example" role="application">
<form method="post" action="http://trykendoui.telerik.com/@ggkrustev/oDEW">
<h2>Invite Attendees</h2>
<label for="required">Required</label>
<select id="required" name="required" multiple="multiple" data-placeholder="Select attendees...">
<option>Steven White</option>
<option>Nancy King</option>
<option>Nancy Davolio</option>
<option>Robert Davolio</option>
<option>Michael Leverling</option>
<option>Andrew Callahan</option>
<option>Michael Suyama</option>
<option selected>Anne King</option>
<option>Laura Peacock</option>
<option>Robert Fuller</option>
<option>Janet White</option>
<option>Nancy Leverling</option>
<option>Robert Buchanan</option>
<option>Margaret Buchanan</option>
<option selected>Andrew Fuller</option>
<option>Anne Davolio</option>
<option>Andrew Suyama</option>
<option>Nige Buchanan</option>
<option>Laura Fuller</option>
</select>
<button>Post</button>
</form>
<script>
$(document).ready(function() {
// create MultiSelect from select HTML element
var required = $("#required").kendoMultiSelect().data("kendoMultiSelect");
required.tagList.kendoSortable({
hint:function(element) {
return element.clone().addClass("hint");
},
placeholder:function(element) {
return element.clone().addClass("placeholder").text("drop here");
}
});
});
</script>
</div>
See Also
- MultiSelect JavaScript API Reference
- How to Cascade from DropDownList
- How to Filter Values in Widgets Sharing the Same Data
- How to Preselect Items Using MVVM Binding
- How to Select All Values with Single Selection
- How to Use MultiSelect with Bootstrap Modal Window
- How to Wire Blur Event of the Filter Input
For more runnable examples on the Kendo UI MultiSelect, browse its How To documentation folder.