New to Kendo UI for jQueryStart a free 30-day trial

Implement Draggable and Droppable Functionality in ListView and Grid

Environment

ProductProgress® Kendo UI® Drag and Drop for jQuery
Operating SystemWindows 10 64bit
BrowserIE For PC
Browser Version11

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.

js
 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>
In this article
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support