Edit this page

Implement Draggable and Droppable Functionality in ListView and Grid

Environment

Product Progress Kendo UI Drag and Drop
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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy