Drag and drop between two treeviews and save in the database

[Leo]

Hello,

I am stacked with this problem since 4 days.

I have two treeviews, the data of the first one is retrieved from my database as bellow :

@(Html.Kendo().TreeView()
                  .Name("treeview-left")
                  .Events(events => events
                  .DragEnd("HierarchyDragEnd"))
                  .HtmlAttributes(new { style = "height: 100%;" })
                  .DataTextField("name")
                  .DragAndDrop(true)
                  .DataSource(source => source
                      .Model(m => m
                          .Id("itemId")
                          .HasChildren("haschildren")
                          )
                      .Read(read => read
                          .Action("GetCatalog", "ItemsSelection")))
                          .ExpandAll(true)
            )

and the second treeview is empty, but i need to drag and drop items on it from the first tree and save in database :

 

@(Html.Kendo().TreeView()
                 .Name("treeview-right")
                 .Events(events => events
                 .DragEnd("HierarchyDragEnd"))
                 .HtmlAttributes(new { style = "height: 100%;" })
                 .DragAndDrop(true)
                 .DataTextField("name")
                 .DataSource(source => source
                             .Model(m => m
                                 .Id("itemId")
                                 .HasChildren("haschildren")
                                 )
                             )

                 )

 I use the script bellow to get the information from the first tree  but the script works just in case if i do drag and drop in the same tree:

function HierarchyDragEnd(e) {
        setTimeout(function () {
            var originDataItem = $("#treeview-left").data('kendoTreeView').dataItem(e.sourceNode);
            var originNodeId = originDataItem.id;
            var originNodeText = originDataItem.name;


            var destinationDataItem = $("#treeview-right").data('kendoTreeView').dataItem(e.destinationNode);
            var destinationNodeId = destinationDataItem.id;
            var destinationNodeText = destinationDataItem.name;
            destinationDataItem.add(originDataItem);
            var dropPosition = e.dropPosition;

            alert("Origin ID: " + originNodeId +
                                "\nOrigin Text: " + originNodeText +
                                "\nDestination ID: " + destinationNodeId +
                                "\nDestination Text: " + destinationNodeText +
                                "\nDrop Position: " + dropPosition);
        }, 100);
    }

 

Can someone pease help me to get all the information i need to save the dropped items in my database, maybe i am not using the right events or something else.

 

Thank you for your help.

[Alex Gyoshev]

Hello Leo,

In previous versions, the TreeView did not provide a source node when dragging between TreeViews. This problem has been fixed in the upcoming Q1 release, which you can expect to ship this week.

Regards,
Alex Gyoshev
Telerik

[Travis]

Understand this is old but I had the same issue, updated my kendo scripts and still had the same issue.  What's the best solution to get the orginDataItem?  Is this not available in the dragend event?  

[Ivan Danchev]

Hello Travis,

You can get the dataItem of the dragged node in the dragend or in the drop event handler using the dataItem method of the TreeView. Here's a dojo example: if you drag and drop a node from the first TreeView to the second TreeView the text of the dragged node is obtained from the dataItem and is logged in the console:

drop: function(e) {
  if (!e.valid) {
    return;
  }
  var dataItem = e.sender.dataItem(e.sourceNode);
  console.log(dataItem.text);
},

Regards,
Ivan Danchev
Progress Telerik