Edit this page

Use Draggable Elements with Multiselection Enabled

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

Example
  <div id="example">

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

    <script>
      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"
        }];

        $("#rowSelection").kendoGrid({
          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>'
            }
          ]
        });

        $(".box").kendoDraggable({
          hint: function(element) {
            return element.clone();
          }
        });
      });
    </script>
  </div>

See Also

For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy