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

Use Draggable Elements with Multiselection Enabled


Product Progress Kendo UI Grid for jQuery
Operating System Windows 10 64bit
Preferred Language JavaScript


How can I use draggable components with enabled multi-selection in the Kendo UI Grid for jQuery?


The following example demonstrates how to use draggable components in a Grid when the multi-selection is enabled.

  <div id="example">

    <div class="demo-section k-content wide">
      <h4>Grid with multiple row selection enabled</h4>
      <div id="rowSelection"></div>

      kendo.UserEvents.defaultThreshold(0); //globally change the default defaultThreshold
      $(document).ready(function () {
        var boxes = [{
          ID : 1,
          Name : "Box 1",
          Color: "red"
        }, {
          ID : 2,
          Name : "Box 2",
          Color: "green"
        }, {
          ID : 3,
          Name : "Box 3",
          Color: "blue"

          dataSource: {
            data: boxes
          selectable: "multiple",
          scrollable: false,
          navigatable: true,
          columns: [
              field: "ID",
              width: 300
              field: "Name",
              width: 300
              title: "Box Draggable",
              template: '<div class="box" style="background-color: #= Color #; cursor: move; width: 20px; height: 20px; text-align: center; color: white;">#= ID #</div>'

          hint: function(element) {
            return element.clone();

See Also

In this article
Not finding the help you need? Improve this article