How to prevent drop on GridView from Treeview ?

[Ledcor Development Team]

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");
            }
        }
    });

 

[Dimiter Topalov]

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