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

How To Reorder Items by Drag and Drop in MultiSelect

Environment

Product Kendo UI MultiSelect Kendo UI Sortable

Description

How to drag and drop to reorder selected items and popup items in MultiSelect?

Solution

    required.tagList.kendoSortable({
      hint: function (element) {    
        return element.clone().addClass("hint");
      },
      placeholder: function (element) {               
        return element.clone().addClass("placeholder").text("drop here");
      },
      change: function (e) {
        var oldIndex = e.oldIndex;
        var newIndex = e.newIndex;
        var multiValue = required.value();
        var newValue = arrangeArray(multiValue, oldIndex, newIndex);
        required.value(newValue);
      }
    });
    $(required.list).children().find("ul").kendoSortable({
        hint: function (element) {
          return  element.clone().addClass("hint");
        },
        placeholder: function (element) {               
          return  element.clone().addClass("placeholder").text("drop here");
        },
        change: function(e) {
          var dataSource = required.dataSource;
          var oldIndex = e.oldIndex,
              newIndex = e.newIndex,
              data = dataSource.data(),
              dataItem = dataSource.at(oldIndex);

          dataSource.remove(dataItem);
          dataSource.insert(newIndex, dataItem);
        }
    });

You can find the full example below:

    <div id="example" role="application">
      <div class="demo-section k-header">
        <h2>Invite Attendees</h2>
        <label for="required">Required</label>
        <select id="required" multiple="multiple" data-placeholder="Select attendees...">
          <option selected>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>
      </div>
      <style>

        .k-item input {
          left: 0
        }
      </style>
      <script>
        $(document).ready(function() {
          function arrangeArray(arr, old_index, new_index) {
            if (new_index >= arr.length) {
              var k = new_index - arr.length + 1;
              while (k--) {
                arr.push(undefined);
              }
            }
            arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
            return arr; // for testing
          };
          var checkInputs = function(elements) {
            console.log(elements);
            elements.each(function() {
              var element = $(this);     
              var input = element.children("input");

              input.prop("checked", element.hasClass("k-selected"));
            });
          };
          // create MultiSelect from select HTML element
          var required = $("#required").kendoMultiSelect({
            itemTemplate: "#:data.text# <input type='checkbox'/>",
            autoClose: false,
            dataBound: function() {
              var items = this.ul.find("li");
              setTimeout(function() {
                checkInputs(items);
              });
            },
            change: function() {
              var items = this.ul.find("li");
              checkInputs(items);
            }
          }).data("kendoMultiSelect");

          required.tagList.kendoSortable({
            hint: function (element) {    
              return element.clone().addClass("hint");
            },
            placeholder: function (element) {               
              return element.clone().addClass("placeholder").text("drop here");
            },
            change: function (e) {
              var oldIndex = e.oldIndex;
              var newIndex = e.newIndex;
              var multiValue = required.value();
              var newValue = arrangeArray(multiValue, oldIndex, newIndex);
              required.value(newValue);
            }
          });

          $(required.list).children().find("ul").kendoSortable({
            hint: function (element) {
              return  element.clone().addClass("hint");
            },
            placeholder: function (element) {               
              return  element.clone().addClass("placeholder").text("drop here");
            },
            change: function(e) {
              var dataSource = required.dataSource;
              var oldIndex = e.oldIndex,
                  newIndex = e.newIndex,
                  data = dataSource.data(),
                  dataItem = dataSource.at(oldIndex);

              dataSource.remove(dataItem);
              dataSource.insert(newIndex, dataItem);
            }
          });
        });
      </script>
    </div>

See Also

In this article