Search code examples
javascriptjquerykendo-uikendo-treeviewkendo-listbox

Kendo UI JQuery treeview disable drag/drop inside but allow drag/drop to listbox

Hey all I am trying to disable the drag/drop within the treeview (as in the user wont be able to move any items anywhere inside the treeview). However I am not coming up with a solution for this issue.

I still want the user to be able to drag/drop an item that's inside the treeview over to my listview box as well as drag/drop it back to the treeview box.

So is it possible to disable the drag/drop feature inside the treeview when keeping the drag/drop from there to my listbox?

enter image description here

Solution

  • One option is to cancel drop action if you identify that it is being dropped inside the treeview. The functionality will still work for the listbox:

    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled</title>

  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.common.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.rtl.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default.min.css">
  <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.mobile.all.min.css">

  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.2.616/js/angular.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.2.616/js/jszip.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script></head>
<body>
  <div id="treeview-left"></div>
  <select id="optional" ></select>

  <script>
      $("#treeview-left").kendoTreeView({
        dragAndDrop: true,
        drop: onDrop,
        dataSource: [
            { id: 1, text: "Furniture", expanded: true, items: [
            { id: 2, text: "Tables & Chairs" },
            { id: 3, text: "Sofas" },
            { id: 4, text: "Occasional Furniture" }
            ] },
            { id: 5, text: "Decor", items: [
            { id: 6, text: "Bed Linen" },
            { id: 7, text: "Curtains & Blinds" },
            { id: 8, text: "Carpets" }
            ] }
        ]
      });

      $("#optional").kendoListBox({
        dataTextField: "text",
        dataValueField: "id",
        dataSource: [{ id: 8, text: "Other products" }]
      });
    
        

      function onDrop(e){   
        if ($(e.destinationNode).closest('.k-treeview').length) {
          e.preventDefault();
          return false;
        }
        
        var item = e.sender.dataItem(e.sourceNode);         
        var listbox = $('#optional').data('kendoListBox');         
        listbox.add(item)
        if(item.hasChildren){
            for(var p=0; p <item.items.length;p++){
                listbox.add(item.items[p])
            }
        }
      }
  </script>
</body>
</html>

    Dojo

    The trick is:

    if ($(e.destinationNode).closest('.k-treeview').length) {
      e.preventDefault();
      return false;
}

    But, the interface still shows the possibility to drop inside the TreeView, that's the only downside.