How to prevent drop on GridView from Treeview ?

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

    Posted 02 May Link to this post

    I have a tree view and a grid view. I am dragging item from grid and dropping  it to a selected node in my treeview, which is working great. Also I allow dragging and dropping of node with the tree. However if by accident I drag an element from treeview and drop it to grid view I get an exception "Uncaught TypeError: Cannot read property 'loaded' of undefined"

    and my page froze.

    How can I prevent droping any element in my grid view and avoid this exception?

    //Bind data to Employee grid
        $("#employeesGrid").kendoGrid({
            dataSource: $scope.datasourceEmployees,
            height: 660,
            dragAndDrop: false,
            sortable: true,
            pageable: true,
            selectable: 'row',
            filterable: {
                mode: "row"
            },
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 7
            },
            columns: [
                {
                    field: "EmployeeKey",
                    title: "Employee Key",
                    filterable: false,
                    width: 100
                },
     
                {
                    field: "FullName",
                    title: "Employee Full Name",
                    filterable: {
                        cell: {
                            showOperators: false
                        }
                    },
                    width: 200
                },
     
                {
                    field: "JDEEmployeeName",
                    title: "JDE Employee Name",
                    filterable: {
                        cell: {
                            showOperators: false
                        }
                    },
                    width: 140
                },
     
                {
                    field: "SFEmployeeName",
                    title: "SF Employee Name",
                    filterable: {
                        cell: {
                            showOperators: false
                        }
                    },
                    width: 140
                }
            ]
        });
     
        $("#employeesGrid").kendoDraggable({
           
            filter: "tr:not(.k-filter-row)", //specify which items will be draggable
            hint: function (element) { //create a UI hint, the `element` argument is the dragged item
                employeeDragged = 1;
                console.log(employeeDragged);
                return element.clone().css({
                    "opacity": 0.6,
                    "background-color": "#0cf"
                });
            }
        });

     

     

    PayrollHierarchyService.getCommunities().then(
            function (results) {
                $scope.dsCommunity = results;
                GenerateDefaultJSONData();
                 
                tvComunity = $("#treeview-Community").kendoTreeView({
                    dataSource: $scope.dsCommunityRolesDefault,
                    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");
          }
        );
     
        //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 destinationNode = $(e.destinationNode);
     
            var treevcomunity = $('#treeview-Community').data('kendoTreeView');
            treevcomunity.append(sourceItem, destinationNode);
        }
     
        //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();
     
                    if (selectedNodeComunity.length != 0 && treevcomunity.parent(selectedNodeComunity).length != 0) {
                        if (dataItem === undefined || dataItem === null) {
     
                        }
                        else treevcomunity.append({ text: dataItem.FullName }, selectedNodeComunity);
     
                    }
                    else
                        alertNotification.show("Please select a Community Role first", "error");
                }
            }
        });

     

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    355 posts

    Posted 04 May Link to this post

    Hello Dave,

    You can handle the drop event of the Kendo UI TreeView, check whether the destination is part of the Grid (via e.destinationNode), and if so - use e.setValid(false) to prevent the drop.

    I hope this helps.

    Regards,
    Dimiter Topalov
    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
Back to Top