Limiting Drag and Drop

[AP]

I'm migrating an application from the old MVC extensions, to KendoUI.
I finally managed to populate my treeview, and get the ID on selection. I now need to replicate the drag and drop functionality, which limits what items can be dragged where.

Essentially I need to restrict dragging, so that items can only be dragged into items of the level above

i.e. A fourth level item can only be dragged to third level items etc..

In my original application (using the MVC extensions, I did this by using the onNodeDragging event - which I know has been replaced by the Drag event.

The code was:-

function onNodeDragging(e) {

    if (!isDropAllowed(e))

        e.setStatusClass('t-denied');

}

 

function isDropAllowed(e)

 

{

 

    var $dropTarget = $(e.dropTarget);

 

    var hoveredItem = $dropTarget.closest('.t-top,.t-mid,.t-bot');

 

  

 

    if (hoveredItem.length > 0) {

 

        var itemHeight = hoveredItem.outerHeight();

 

        var itemTop = hoveredItem.offset().top;

 

        var itemContent = $dropTarget.closest('.t-in');

 

        var delta = itemHeight / (itemContent.length > 0 ? 4 : 2);

 

  

        var insertOnTop = e.pageY < (itemTop + delta);

 

        var insertOnBottom = (itemTop + itemHeight - delta) < e.pageY;

 

        var addChild = itemContent.length > 0 && !insertOnTop && !insertOnBottom;

 

          

 

        if (addChild)

 

            return $dropTarget.parents('.t-item').length == itemLevel;

 

        else

 

            return $dropTarget.parents('.t-item').length == itemLevel + 1;

 

    }

 

      

 

    return false;

 

}

I've changed the setStatusClass line to

e.setStatusClass("k-denied");

But I'm at a loss on how to alter the isDropAllowed function to work with the KendoTreeView.

Thanks

 

[Gianluigi]

self.Dragging = function (e) {

 

    if (e.statusClass == 'add') {

        e.setStatusClass("k-denied");

        return;

    }

 

    var source = self.GetNode(e.sourceNode);

    var child = $(e.dropTarget)

            .parents('.k-group')

            .first()

            .children('.k-item')

            .filter(function () {

                return $(this).data('uid') == source.uid

            });

 

    if (child.length == 0) {

        e.setStatusClass("k-denied");

    }

}

 

self.GetNode = function (element) {

    var u = $(element).data('uid');

    if (_.isEmpty(u))

        return undefined;

 

    var treeView = self.tree.data(self.Page.TreeView);

    return treeView.dataSource.getByUid(u);

}

I used something  like that for allowing drag only in the current node 

[AP]

Thanks for responding - but it's not really what I was after.

I managed to put something together, but only by using the IDs I have assigned each node, and by using them to validate the drop.

    var $dropTarget = $(e.dropTarget);

 

    var hoveredItem = $dropTarget.closest('.k-item');

 

    var treeview = $("#AjaxTreeView").data("kendoTreeView");

 

    var draggedValue=treeview.dataItem(e.sourceNode);

 

    var sourceID=draggedValue.Id;

 

 

    if (!(hoveredItem.length && hoveredItem.parents(".k-treeview").length))

    {

        return false;

    }

    else

    {

        var destination = treeview.dataItem(hoveredItem);

 

    var DestID=destination .Id;

}

The code checks if a node is the drop target, and if it is, gets the ID of the destination node.

[Robert]

I have two treeviews that only have root nodes/items.  I want to be able to drag and drop the parents from one to the other and back, but I don't want the user to be able to nest them at all.  They must always be root.  I also need to be able to re-order them at any point in the tree.

Currently, I can't get it to restrict the addition of nested nodes to the destinationNode.  I've looked at using: the level, item.length, .parentsUntil(".k-treeview", ".k-item").length

Below is the code that I've been playing with.  Does anyone know the combination to prevent the adding child nodes to the destinationNode?

<div id="selectFiles-container">
    <div id="selectFiles-column1">
        Files available for combining:
        @(Html.Kendo().TreeView()
            .Name("optionsTreeView")
            .DragAndDrop(true)
            .DataTextField("Name")
            .DataSource(dataSource => dataSource
                .Read(read => read.Action("NonZipFiles", "Initiate")
                )
            )
            .Events(e => e
                .Select("selectTreeView_select")
                .Drop("onTreeViewDrop")
                .DragEnd("onTreeViewDragEnd")
            )
            .HtmlAttributes(new { style = "height: 400px; width: 300px; border: solid 1px;" })
        )
    </div>
    <div id="selectFiles-column2">
        Ordered Files for combining:
        @(Html.Kendo().TreeView()
            .Name("orderedTreeView")
                    .DragAndDrop(true)
                    .DataTextField("Name")
            .HtmlAttributes(new { style = "height: 400px; width: 300px; border: solid 1px;" })
                            .Events(events => events.Drop("onTreeViewDrop").DragEnd("onTreeViewDragEnd"))
        )
        <br />
        <input type="button" id="btnAppendFiles" onclick="alert('not setup');" value="Combine Files" disabled="disabled" />
    </div>
    <div id="selectFiles-clear"></div>
</div>
<script type="text/javascript">
    var orderedTreeView;
    var optionsTreeView;
    var dstNode;
    var parNode;

    $(document).ready(function () {
        optionsTreeView = $("#optionsTreeView").data("kendoTreeView");
        orderedTreeView = $("#orderedTreeView").data("kendoTreeView");
    });

    function onTreeViewDrop(e) {
        if (e.valid) {
            e.setValid(false);
            optionsTreeView = $("#optionsTreeView").data("kendoTreeView");
            orderedTreeView = $("#orderedTreeView").data("kendoTreeView");
            dstNode = orderedTreeView.dataItem(e.destinationNode);

            var level = $(e.destinationNode).parentsUntil(".k-treeview", ".k-item").length;
            console.log('dstlvl: ' + level);

            var destItem = orderedTreeView.dataItem(e.destinationNode);
            console.log('dstItem: ' + destItem);
            if (destItem !== undefined) { console.log('dstItems: ' + destItem.items); }
            if (destItem !== undefined && destItem.items !== undefined) { console.log('dstItems: ' + destItem.items.length); }

            if (orderedTreeView.dataItem(e.destinationNode) !== undefined) {
                parNode = orderedTreeView.dataItem(e.destinationNode.parentNode)
                if (dstNode.items !== undefined) {
                    console.log('dstitems: ' + dstNode.items.length);
                }
                if (parNode !== undefined && parNode.items !== undefined) {
                    console.log('dstParitems: ' + parNode.items.length);
                }
            }
            else parNode = undefined;

            console.log();
            //if (('selectFiles-column2' === e.destinationNode.parentNode.id || 'selectFiles-column1' === e.destinationNode.parentNode.id)) {
            if ((level === 0 && (destItem === undefined || destItem.items === undefined))
                || (level === 0 && (destItem !== undefined && destItem.items !== undefined && destItem.items.length === 0))) {
                e.setValid(true);
            }
        }
    }
</script>