Drag and Drop Between Trees

Setting the allowDrag property to true allows users to drag and drop nodes within the same TreeView.

To allow dragging and dropping nodes between different TreeView controls, you must handle the dragOver event and set the cancel parameter to true if the operation is invalid, or to false if it is valid.

allow dragging within trees allow dragging between trees

root 1

Item 1.1

Item 1.2

Item 1.3

root 2

Item 2.1

Item 2.2

Item 2.3

// This file locates: "Scripts/Lesson/C1Nav/BetweenTrees.js".
c1.documentReady(function () {
    var firstTree = wijmo.Control.getControl('#firstTree');
    firstTree.itemsSource = [
        {
            header: 'root 1', items: [
            { header: 'Item 1.1' },
            { header: 'Item 1.2' },
            { header: 'Item 1.3' }]
        }
    ];
    firstTree.displayMemberPath = 'header';
    firstTree.childItemsPath = "items";
    firstTree.allowDragging = true;
    firstTree.dragOver.addHandler(dragOverBetweenTrees);
 
    var secondTree = wijmo.Control.getControl('#secondTree');
    secondTree.itemsSource = [
        {
            header: 'root 2', items: [
            { header: 'Item 2.1' },
            { header: 'Item 2.2' },
            { header: 'Item 2.3' }]
        }
    ];
    secondTree.displayMemberPath = 'header';
    secondTree.childItemsPath = "items";
    secondTree.allowDragging = true;
    secondTree.dragOver.addHandler(dragOverBetweenTrees);
 
    // handle drag-drop within or between trees
    function dragOverBetweenTrees(s, e) {
        var t1 = e.dragSource.treeView;
        var t2 = e.dropTarget.treeView;
 
        // prevent dragging within trees
        if (t1 == t2 && !document.getElementById('dragWithin').checked) {
            e.cancel = true;
        }
 
        // allow dragging between trees
        if (t1 != t2 && document.getElementById('dragBetween').checked) {
            e.cancel = false;
        }
    }
});

// This file locates: "Content/css/Lesson/C1Nav/BetweenTrees.css".
/* default trees on this sample */
.demo-control .wj-treeview {
    height: 250px;
    font-size: 120%;
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 3px;
    background: #f0f0f0;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1NavController : Controller
    {
        // GET: BetweenTrees
        public ActionResult BetweenTrees()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Nav.BetweenTrees_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Nav.BetweenTrees_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Nav.BetweenTrees_Text2)
</p>
 
<label>
    <input id="dragWithin" type="checkbox" checked="checked">
    @Html.Raw(Resources.C1Nav.BetweenTrees_Text3)
</label>
<label>
    <input id="dragBetween" type="checkbox" checked="checked">
    @Html.Raw(Resources.C1Nav.BetweenTrees_Text4)
</label>
 
<div class="row demo-settings">
    <div class="col-xs-6">
        @Html.C1().TreeView().Id("firstTree").CssClass("short-tree")
    </div>
    <div class="col-xs-6">
        @Html.C1().TreeView().Id("secondTree").CssClass("short-tree")
    </div>
</div>