diff --git a/knowledge-base/treeview-validate-drop-target.md b/knowledge-base/treeview-validate-drop-target.md new file mode 100644 index 0000000000..768709a338 --- /dev/null +++ b/knowledge-base/treeview-validate-drop-target.md @@ -0,0 +1,196 @@ +--- +title: Validate Drop Target in TreeView +description: How to validate drop target in Telerik TreeView for Blazor and prevent drop for invalid target. +type: how-to +page_title: How to Validate Drop Target in TreeView +slug: treeview-kb-validate-drop-target +tags: treeview, item, node, drop target, draggable, validate, invalid, prevent drop +ticketid: 1592132 +res_type: kb +--- + +## Environment + + + + + + + + +
ProductTreeView for Blazor
+ +## Description + +I have a draggable TreeView and I want to prevent the user from dropping items in specific locations or folders. How can I achieve this? + +How to validate the drop target, so I don't allow the user to drop the file if the target is invalid? + +## Solution + +To validate the drop target and prevent the user from dropping on an invalid target, follow these steps: + +1. Handle the [`OnDrag`]({%slug treeview-events%}#drag-events) event of the TreeView to validate the target based on your requirements. In the example below, we are checking it the user tries to drop an item from the **Documents** folder into the **Pictures** folder - the **Pictures** folder is not a valid target in this case. +1. Raise a flag if the target is not valid. +1. Change the icon in the drag clue to indicate the target is not valid. Once the [Drag Clue Template](https://feedback.telerik.com/blazor/1501043-drag-clue-template) is available, you may use it to change the rendering as needed. At the time of writing, changing the icon is only possible with CSS as per the example below. +1. Include a conditional logic in your [`OnDrop`]({%slug treeview-events%}#drag-events) handler to not perform any action if the target is invalid. +1. Use CSS to hide the build-in drop hint for the invalid target. + + +>caption Validate TreeView drop target and prevent drop for invalid target + +````CSHTML +This TreeView does not allow the user to drop items from the Documents folder into the Pictures folder. + + + + +@if (IsPointerOverInvalidTarget) +{ + +} + +@code { + private TreeItem DestinationItem { get; set; } + private List Data { get; set; } = new List(); + private IEnumerable ExpandedItems { get; set; } = Enumerable.Empty(); + private bool IsPointerOverInvalidTarget { get; set; } + + private void OnDrag(TreeViewDragEventArgs args) + { + if (args.DestinationItem != null) + { + var draggedItem = args.Item as TreeItem; + var destinationItem = args.DestinationItem as TreeItem; + + if (draggedItem.ParentId == 1 && (destinationItem.ParentId == 7 || destinationItem.Id == 6 || destinationItem.Id == 7)) + { + IsPointerOverInvalidTarget = true; + } + else + { + IsPointerOverInvalidTarget = false; + } + } + } + + private void OnItemDrop(TreeViewDropEventArgs args) + { + if (IsPointerOverInvalidTarget) + { + return; + } + else + { + var item = args.Item as TreeItem; + var destinationItem = args.DestinationItem as TreeItem; + + if (destinationItem != null && IsChild(item, destinationItem)) + { + return; + } + + Data.Remove(item); + + if (item.ParentId != null && !Data.Any(x => item.ParentId == x.ParentId)) + { + Data.FirstOrDefault(x => x.Id == item.ParentId).HasChildren = false; + } + + if (args.DropPosition == TreeViewDropPosition.Over) + { + item.ParentId = destinationItem.Id; + destinationItem.HasChildren = true; + + Data.Add(item); + } + else + { + var index = Data.IndexOf(destinationItem); + + item.ParentId = destinationItem.ParentId; + + if (args.DropPosition == TreeViewDropPosition.After) + { + index++; + } + + Data.Insert(index, item); + } + + // Refresh data + Data = new List(Data); + } + } + + private bool IsChild(TreeItem item, TreeItem destinationItem) + { + if (destinationItem?.ParentId == null || item == null) + { + return false; + } + else if (destinationItem.ParentId?.Equals(item.Id) == true) + { + return true; + } + + var parentDestinationItem = Data.FirstOrDefault(e => e.Id.Equals(destinationItem.ParentId)); + return IsChild(item, parentDestinationItem); + } + + protected override void OnInitialized() + { + LoadData(); + base.OnInitialized(); + } + + private void LoadData() + { + Data = new List() + { + new TreeItem(1, null, "Documents", SvgIcon.Folder, true), + new TreeItem(2, 1, "report.xlsx", SvgIcon.FileExcel, false), + new TreeItem(3, 1, "status.docx", SvgIcon.FileWord, false), + new TreeItem(4, 1, "conferences.xlsx", SvgIcon.FileExcel, false), + new TreeItem(5, 1, "performance.pdf", SvgIcon.FilePdf, false), + new TreeItem(6, null, "Pictures", SvgIcon.Folder, true), + new TreeItem(7, 6, "Camera Roll", SvgIcon.Folder, true), + new TreeItem(8, 7, "team.png", SvgIcon.FileImage, false), + new TreeItem(9, 7, "team-building.png", SvgIcon.FileImage, false), + new TreeItem(10, 7, "friends.png", SvgIcon.FileImage, false), + }; + ExpandedItems = Data.ToList(); + } + + public class TreeItem + { + public int Id { get; set; } + public int? ParentId { get; set; } + public string Text { get; set; } + public ISvgIcon Icon { get; set; } + public bool HasChildren { get; set; } + + public TreeItem(int id, int? parent, string text, ISvgIcon icon, bool hasChildren) + { + Id = id; + ParentId = parent; + Text = text; + Icon = icon; + HasChildren = hasChildren; + } + } +} +````