This is a migrated thread and some comments may be shown as answers.

Drag and drop between two treeviews and save in the database

3 Answers 169 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Leo
Top achievements
Rank 1
Leo asked on 08 Jan 2016, 11:29 AM

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.

3 Answers, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 12 Jan 2016, 01:21 PM

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Travis
Top achievements
Rank 1
answered on 20 Feb 2018, 10:18 PM
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?  
0
Ivan Danchev
Telerik team
answered on 22 Feb 2018, 03:30 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
TreeView
Asked by
Leo
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Travis
Top achievements
Rank 1
Ivan Danchev
Telerik team
Share this question
or