Question

i have a TreeView that once the user drops the item to the desired position, it displays a dialog box and asks for confirmation, if the user selects cancel, how would i also cancel the placement of the item so it goes back to its original position? my current code is below but isnt working:

var newDiv = $(document.createElement('div'));

newDiv.html('Are you sure you want to move the item: ' + title);
newDiv.dialog( {
    autoOpen: true,
    width: 600,
    buttons: {
        "Save": function () {
            $(this).dialog("close");
        },
        "Cancel": function () {
            $(this).dialog("close");

            e.setValid = false;

        }
    }
});

I have also tried doing the same kind of code on the dragend event and using e.preventDefault(); with no more luck

Answer 1

The drop event handler provides the setValid function, which can prevent the drop from occurring. For example:

function onDrop(e) {
    e.setValid(confirm('Do you wish to move this item here?'));
}

$("#treeView").kendoTreeView({
    // ...
    dragAndDrop: true,
    drop: onDrop
});

I’ve written a fiddle which demonstrates how this works.