Kendo UI TreeView Glisser-déposer obtenir l'objet treeview destination (drop)

Question

J'ai deux structures TreeViews avec la fonctionnalité glisser-déposer. Les nœuds des deux Treeviews peuvent être glissés et déposés l'un sur l'autre.

Si je traîne une partie du contenu de la source à la destination je veux la liste à jour de destination dans la console

Pour référence, vous pouvez vérifier link here.

Dans cette DEMO je peux déplacer quelque chose d'une catégorie à une autre mais je veux capturer la liste à jour de la catégorie contenant toute la sous-catégorie.

Voici l'extrait de mon code

<div id="example"> 
     <div class="demo-section k-content"> 
      <h4>Treeview One</h4> 
      <div id="treeview-left"></div> 
      <h4 style="padding-top: 2em;">Treeview Two</h4> 
      <div id="treeview-right"></div> 
     </div> 

     <script> 
      $("#treeview-left").kendoTreeView({ 
       dragAndDrop: true, 
       dataSource: [ 
        { text: "Furniture", expanded: true, items: [ 
         { text: "Tables & Chairs" }, 
         { text: "Sofas" }, 
         { text: "Occasional Furniture" } 
        ] }, 
        { text: "Decor", items: [ 
         { text: "Bed Linen" }, 
         { text: "Curtains & Blinds" }, 
         { text: "Carpets" } 
        ] } 
       ] 
      }); 

      $("#treeview-right").kendoTreeView({ 
       dragAndDrop: true, 
       dataSource: [ 
        { text: "Storage", expanded: true, items: [ 
         { text: "Wall Shelving" }, 
         { text: "Floor Shelving" }, 
         { text: "Kids Storage" } 
        ] 
        }, 
        { text: "Lights", items: [ 
         { text: "Ceiling" }, 
         { text: "Table" }, 
         { text: "Floor" } 
        ] 
        } 
       ] 
      }); 
     </script> 

comment puis-je y parvenir? Merci

Answer 1

J'ai créé un JsFiddle DEMO here.

Vous devez lier le dragend event de vos deux Treeviews à une fonction et vous pouvez ensuite obtenir la liste Treeview de destination à partir de là. Voici l'extrait de la démo:

function tree_dragend(e) { 
    alert("See your console"); 
    console.log("Drag end sourceNode = ", e.sourceNode, "dropPosition = ", e.dropPosition, "destinationNode = ", e.destinationNode); 

    var destinationTreeviewDOMElement = $(e.destinationNode).closest("div.k-treeview"); 
    console.log("destinationTreeviewDOMElement = ", destinationTreeviewDOMElement); 

    var destinationTreeview = $(destinationTreeviewDOMElement).data("kendoTreeView"); 
    console.log("destinationTreeview = ", destinationTreeview); 

    console.log("destinationTreeviewData = ", destinationTreeview.dataSource.data()); 
} 

var treeview_left = $("#treeview-left").data("kendoTreeView"); 
var treeview_right = $("#treeview-right").data("kendoTreeView"); 

treeview_left.bind("dragend", tree_dragend); 
treeview_right.bind("dragend", tree_dragend);