Drag and drop between two treeviews and save in the database

2 posts, 0 answers
  1. Leo
    Leo avatar
    9 posts
    Member since:
    Dec 2015

    Posted 08 Jan Link to this post

    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.

  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 12 Jan Link to this post

    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
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top