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.