Implement Draggable and Droppable Functionality in ListView and Grid

Environment

Product	Progress® Kendo UI® Drag and Drop for jQuery
Operating System	Windows 10 64bit
Browser	IE For PC
Browser Version	11

Description

How can I implement the drag-to-select and draggable functionalities in a Kendo UI ListView or Grid when multiple selection is enabled?

Solution

Prevent the start and move events of the selectable elements in the dataBound even of the ListView or Grid you use.

 dataBound: function() {
              this.selectable.userEvents._events.start = null
              this.selectable.userEvents._events.move = null
              ............
 }

The following example demonstrates the full implementation of the approach.

<div style="padding-bottom: 20px">
<label>List View Drop Area</label>
<div id="list-view-drop" style="height: 400px; width: 400px;border: 1px solid black"></div>
<label>List View</label>
<div id="listview"></div>
</div>
  <script>
    $(function() {
        var dataSource = new kendo.data.DataSource({
            data: [{ name: "" }, {name: ""}],
            pageSize: 21
        });

        $("#listview").kendoListView({
            dataSource: dataSource,
            selectable: "multiple",
            template: kendo.template("<div class='draggable' style='height:100px;width:100px;border:1px solid black'>You should be able to drag this</div>"),
            dataBound: function() {
              this.selectable.userEvents._events.start = null
              this.selectable.userEvents._events.move = null;
                $("#listview").kendoDraggable({
                  filter: ".draggable",
                    hint: function(element) {
                        return element.clone();
                    }
                });
            }
        });

        $("#list-view-drop")
          .kendoDropTarget({
          drop: function (e) {
            alert("Item Dropped!");
          },
        });

    });
</script>