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

[Brian]

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?

[Alex Gyoshev]

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

[Brian]

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

    }

});




[Brian]

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'

    });

[Alex Gyoshev]

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

[ICT]

Hi,

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

Regards
Paul Sinnema