RE: Two Trees -- Allowing the drop, but preventing the draggable from moving...

6 posts, 1 answers
  1. Brian
    Brian avatar
    2 posts
    Member since:
    Jul 2011

    Posted 03 Jun 2012 Link to this post

    Simply put, I want to allow dragging items from one tree to another -- but prevent the moving of the dragged tree item to the destination tree.  

    I want it cloned and put in the droppable place within the destination tree. Is there a simple event method or configuration setting I can use to accomplish this?
  2. Answer
    Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 04 Jun 2012 Link to this post

    Hello Brian,

    There is no configuration option that does this automatically. You can prevent the drop event (e.setValid(false) or e.preventDefault()), and append the node to the target treeview accordingly:

    if (dropPosition == "over") {
        treeview.append(sourceNode, destinationNode);
        treeview.expand(destinationNode);
    } else if (dropPosition == "before") {
        treeview.insertBefore(sourceNode, destinationNode);
    } else if (dropPosition == "after") {
        treeview.insertAfter(sourceNode, destinationNode);
    }

    Regards,
    Alex Gyoshev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Brian
    Brian avatar
    2 posts
    Member since:
    Jul 2011

    Posted 04 Jun 2012 Link to this post

    Hey Alex,

    Thanks for the quick response. This is what I ended up doing -- but instead of copying the whole node, I just pulled data from a hidden field within the source item and used that to pass json as the first argument.

    It'd be great if you added a 'dropSettings' configuration to this control. Something like this would be ideal:

    .kendoTreeView({
        dragAndDrop: true,
        dropSettings: {
            moveSourceNode: false,
            includeChildren: false
        }
    });

  5. Brian
    Brian avatar
    8 posts
    Member since:
    Oct 2008

    Posted 04 Jun 2012 Link to this post

    Here is the full code for the benefit of others:

    $(document).ready(function () {
        var action = '@Url.Action("GetTreeAsKendoDataSource", "TreeData")';
        $.ajax({
            type: 'POST',
            url: action,
            data: {},
            success: function (data) {
                $("#treeView-left").kendoTreeView({
                    dragAndDrop: true,
                    dataSource: data,
                    template: "#= item.text # <input type='hidden' value='#= item.entityID#' data-entity-name='#= item.entity.Name #' class='entity-data' /> ",
                    drag: function (e) {
                        if ($(e.dropTarget).parents('#RightTreeContainer').length > 0) {
                             e.setStatusClass('k-add');
                        }
                    },
                    drop: function (e) {
                        var rightTree = $("#treeView-right").data('kendoTreeView')
                        var source = $(e.sourceNode);
                        var destination = $(e.destinationNode);
                        var itemData = source.find('.item-data:first');
                        var treeItem = {
                            text: itemData.data('entity-name'),
                            tagId: itemData.val()
                        };
                        if (e.valid && destination.length > 0) {
                            if (e.dropPosition == "over") {
                                rightTree.append(treeItem, destination);
                                rightTree.expand(e.destinationNode);
                            }
                            else if (e.dropPosition == "before") {
                                rightTree.insertBefore(treeItem, destination);
                            }
                            else if (e.dropPosition == "after") {
                                rightTree.insertAfter(treeItem, destination);
                            }
                        }
                        else {
                            rightTree.append(treeItem, null);
                            $('#NoItemsMessage').hide();
                        }
                        e.setValid(false);
                    }
                }).data('kendoTreeView');
            },
            dataType: 'json'
        });
  6. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 05 Jun 2012 Link to this post

    Thank you for sharing your solution with the community. We will consider your feedback for future releases -- if you want it to gain more traction, you can submit it on uservoice

    Kind regards,
    Alex Gyoshev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Rob
    Rob avatar
    2 posts
    Member since:
    Sep 2012

    Posted 17 Oct 2012 Link to this post

    Hi,

    Added this as a wish in UserVoice here; drag and drop copy

    Regards
    Paul Sinnema
Back to Top
Kendo UI is VS 2017 Ready