TreeView
TreeView
Drag and Drop
This view shows how to drag and drop the nodes in a TreeView control.
Features
Sample
Description
Set the AllowDragging property to true to allow users to drag nodes to new positions within the TreeView.
When dragging is allowed, users may drag any node to any position within the tree. You can customize this behavior by handling the TreeView drag/drop events:
- OnClientDragStart: Occurs when a drag/drop operation is about to start. You may examine the node about to be dragged and cancel the operation by setting the event's cancel parameter to true.
- OnClientDragOver: Occurs while the user drags the node over other nodes on the tree. You may examine the current target node and drop position and prevent the drop or modify its location setting the event's cancel and position parameters.
- OnClientDrop: Occurs when the user drops the node into its new location. You may examine the current target node and drop position and prevent the drop or modify its location setting the event's cancel and position parameters.
- OnClientDragEnd: Occurs after the drag/drop operation is finished, even if it was canceled and the source node was not moved.
The example shows how to provide standard and customized drag/drop operations on a TreeView control.
Source
DragDropController.cs
using MvcExplorer.Models; using System.Web.Mvc; namespace MvcExplorer.Controllers { partial class TreeViewController { // GET: DragDrop public ActionResult DragDrop() { return View(Property.GetData(Url)); } } }
DragDrop.cshtml
@model Property[] @section Scripts{ <script type="text/javascript"> var allowDraggingParentNodes = true; var allowDroppingIntoEmpty = true; // use OnClientDragStart event to honor the allowDraggingParentNodes setting // by setting the 'cancel' event parameter to true function dragStart(treeview, e) { if (e.node.hasChildren) { if (!allowDraggingParentNodes) { e.cancel = true; // prevent dragging parent nodes } else { e.node.isCollapsed = true; // collapse parent nodes when dragging } } } // use OnClientDragOver event to honor the allowDroppingIntoEmpty setting // by changing the 'position' event parameter to 'Before' function dragOver(treeview, e) { if (!allowDroppingIntoEmpty && !e.dropTarget.hasChildren && e.position == wijmo.nav.DropPosition.Into) { e.position = wijmo.nav.DropPosition.Before; } } c1.documentReady(function () { document.getElementById('allowDraggingParentNodes').addEventListener('change', function (e) { allowDraggingParentNodes = e.target.checked; }); document.getElementById('allowDroppingIntoEmpty').addEventListener('change', function (e) { allowDroppingIntoEmpty = e.target.checked; }); }) </script> } @(Html.C1().TreeView() .Bind(Model) .DisplayMemberPath("Header") .ChildItemsPath("Items") .ImageMemberPath("Image") .ShowCheckboxes(true) .AllowDragging(true) .OnClientDragStart("dragStart") .OnClientDragOver("dragOver")) <br /> <label> <input id="allowDraggingParentNodes" type="checkbox" checked="checked"> @Html.Raw(Resources.TreeView.DragDrop_Text4) </label> <label> <input id="allowDroppingIntoEmpty" type="checkbox" checked="checked"> @Html.Raw(Resources.TreeView.DragDrop_Text5) </label> @section Summary{ <p>@Html.Raw(Resources.TreeView.DragDrop_Text0)</p> } @section Description{ <p>@Html.Raw(Resources.TreeView.DragDrop_Text1)</p> <p>@Html.Raw(Resources.TreeView.DragDrop_Text2)</p> <p>@Html.Raw(Resources.TreeView.DragDrop_Text3)</p> }
Documentation