How to prevent dropping duplicate element on a sub tree?

5 posts, 0 answers
  1. Dave
    Dave avatar
    13 posts
    Member since:
    Sep 2008

    Posted 13 May Link to this post

    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?

  2. Stefan
    Admin
    Stefan avatar
    272 posts

    Posted 16 May Link to this post

    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
    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. Dave
    Dave avatar
    13 posts
    Member since:
    Sep 2008

    Posted 19 May in reply to Stefan Link to this post

    //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;
     
            }
    });
  5. Dave
    Dave avatar
    13 posts
    Member since:
    Sep 2008

    Posted 19 May Link to this post

    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.
  6. Stefan
    Admin
    Stefan avatar
    272 posts

    Posted 20 May Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready