How to prevent dropping duplicate element on a sub tree?

[Ledcor Development Team]

I have a grid-view which contains employee with id and name and a tree-view with cities with name and id and different roles under a cities as child nodes. I am dragging element from the grid and dropping it in the tree view to generate a hierarchy.

I like to prevent dropping duplicate employee under same cities/same roles in the tree view but like to allow drop on a different cities or under different roles in the same city. I have searched and found solution that prevents dropping duplicate element on the entire tree but how to do that on a sub tree level?

[Stefan]

Hello Dave,

Could you please send us sample code or a runnable example, in order to help us get a better picture of your current implementation? In this way we will be able to give more up-to-the-point suggestions. Thank you.

Regards,
Stefan
Telerik

[Ledcor Development Team]

//GET Communities from DB and populate tree view with default roles
    PayrollHierarchyService.getCommunities().then(
        function (results) {
            $scope.dsCommunity = results;
            GenerateDefaultJSONData();

            tvComunity = $("#treeview-Community").kendoTreeView({
                dataSource: $scope.dsCommunityRolesDefault,
                dataBound: function(e) {
                    if (!this.dataSource.data().length) {
                        this.element.append("<p class='no-items'>No items yet.</p>");
                    } else {
                        this.element.find(".no-items").remove();
                    }
                },
                    dragAndDrop: true,
                    dataTextField: "text",
                    loadOnDemand: false,

                    drop: onDrop

            }).data("kendoTreeView");
        },
      function (error) {
          console.log(error.statusText);
          alertNotification.show("Can not Connect to the Database!", "error");
      }
    );


    function IsRoleNode(nodeText)
    {
        if(nodeText === "REGIONAL MANAGER" || nodeText === "LOCATION MANAGER" || nodeText === "EMPLOYEE" || nodeText === "TECHNICIAN")
            return 1;
        else
            return 0;
    }

    //Drag and Drop element within a tree (ie Copy, paste node within tree)
    function onDrop(e) {

        e.preventDefault();

        var sourceItem = this.dataItem(e.sourceNode).toJSON();
        var destinationItem = this.dataItem(e.destinationNode);
        var destinationNode = $(e.destinationNode);

        var treevcomunity = $('#treeview-Community').data('kendoTreeView');
        if (!employeeGridDropped) {
            var parent = treevcomunity.parent($(e.sourceNode));
            if (parent.length != 0) {

                if (IsRoleNode(destinationItem.text) && IsRoleNode(sourceItem.text)) {
                    alertNotification.show("Can't copy a role element under another role!", "error");
                }
                else {
                    treevcomunity.append(sourceItem, destinationNode);
                }
            }
            else
                alertNotification.show("You Can't copy a Community!", "error");

        }
        else {
            var parent = treevcomunity.parent($(e.sourceNode));
            if (parent.length != 0) {
                treevcomunity.remove($(e.sourceNode));
                alertNotification.show("Deleted!", "info");
            }
            else
                alertNotification.show("You Can not Remove a Community!", "error");
        }

        employeeGridDropped = 0;

    }

    //Drag and add Employee elements to community treeview
    $("#treeview-Community").kendoDropTarget({
        drop: function (e) {
            if (employeeDragged) {
                employeeDragged = 0;
                var draggableElement = e.draggable.currentTarget,
                dataItem = $scope.datasourceEmployees.getByUid(draggableElement.data("uid"));

                var treevcomunity = $('#treeview-Community').data('kendoTreeView');
                var selectedNodeComunity = treevcomunity.select();

              //  console.log("Community ID:" +  selectedNodeComunity.id);

                var parentLength = $(selectedNodeComunity).parentsUntil($("#treeview-Community"), "li");

                if (selectedNodeComunity.length != 0 && treevcomunity.parent(selectedNodeComunity).length != 0) {

                    if (dataItem === undefined || dataItem === null) {

                    }
                    else if (parentLength.length < 3)
                    {
                     //   console.log("Employee ID:" + dataItem.EmployeeKey);
                        treevcomunity.append({ text: dataItem.FullName, id: dataItem.EmployeeKey }, selectedNodeComunity);
                    }
                    else {
                        alertNotification.show("Not alowed to add element at this level!", "error");
                    }

                }
                else
                    alertNotification.show("Please select a Community Role first", "error");
            }
        }
    });

//Setting the flag to prevent deopping element in employee table and the issue that followed.
    $("#employeesGrid").kendoDropTarget({

        drop: function (e) {
            employeeGridDropped = 1;

        }
});

[Ledcor Development Team]

See the attached image in my original question for clarification. My problem is I like to add/drop same employee under different community or roles but prevent  dropping it under same role in the tree view. Currently I know, there are features that allows you to search the entire tree by text or id for duplicate element checking but it will not work for me as I want to allow duplicate in certain nodes while not on others.

[Stefan]

Hello Dave,

The drop event arguments provide a reference to the drop target element. From this element, you can retrieve the respective TreeView data item. This data item (Kendo UI Node) has a parentNode method:

http://docs.telerik.com/kendo-ui/api/javascript/data/node#methods-parentNode

Once you have the parent node, obtain the DataSource instance, which holds the child nodes and iterate them:

http://docs.telerik.com/kendo-ui/api/javascript/data/node#fields-children
 
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-view

In this way you will find out if the dropped item already exists in the drop destination.

Let me know if you have other specific questions related to the Kendo UI APIs or behavior.

Regards,
Stefan
Telerik