From d290c10e02434aa05b43560cafdba2f275f81fab Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Fri, 29 Nov 2024 14:40:27 +0200 Subject: [PATCH 1/6] chore(TreeView): validate drop target --- .../treeview-validate-drop-target.md | 201 ++++++++++++++++++ 1 file changed, 201 insertions(+) create mode 100644 knowledge-base/treeview-validate-drop-target.md diff --git a/knowledge-base/treeview-validate-drop-target.md b/knowledge-base/treeview-validate-drop-target.md new file mode 100644 index 0000000000..41f3abef92 --- /dev/null +++ b/knowledge-base/treeview-validate-drop-target.md @@ -0,0 +1,201 @@ +--- +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 +position: +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; + } + } +} +```` From a07e19096e96652d1879eac56e50e47d09bb3fd2 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Fri, 6 Dec 2024 19:42:19 +0200 Subject: [PATCH 2/6] Update knowledge-base/treeview-validate-drop-target.md Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> --- knowledge-base/treeview-validate-drop-target.md | 1 - 1 file changed, 1 deletion(-) diff --git a/knowledge-base/treeview-validate-drop-target.md b/knowledge-base/treeview-validate-drop-target.md index 41f3abef92..ddbd6fca85 100644 --- a/knowledge-base/treeview-validate-drop-target.md +++ b/knowledge-base/treeview-validate-drop-target.md @@ -4,7 +4,6 @@ description: How to validate drop target in Telerik TreeView for Blazor and prev type: how-to page_title: How to Validate Drop Target in TreeView slug: treeview-kb-validate-drop-target -position: tags: treeview, item, node, drop target, draggable, validate, invalid, prevent drop ticketid: 1592132 res_type: kb From eb8bd4cd7f739b8aebbbc2cdea2c6ed94b056233 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Fri, 6 Dec 2024 19:42:28 +0200 Subject: [PATCH 3/6] Update knowledge-base/treeview-validate-drop-target.md Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> --- knowledge-base/treeview-validate-drop-target.md | 1 - 1 file changed, 1 deletion(-) diff --git a/knowledge-base/treeview-validate-drop-target.md b/knowledge-base/treeview-validate-drop-target.md index ddbd6fca85..cea51331c4 100644 --- a/knowledge-base/treeview-validate-drop-target.md +++ b/knowledge-base/treeview-validate-drop-target.md @@ -20,7 +20,6 @@ res_type: kb - ## 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? From 25a5cfae9eb81e2fb7b57e2949e56d03c6cd1f0c Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Fri, 6 Dec 2024 19:43:14 +0200 Subject: [PATCH 4/6] Update knowledge-base/treeview-validate-drop-target.md Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> --- knowledge-base/treeview-validate-drop-target.md | 1 - 1 file changed, 1 deletion(-) diff --git a/knowledge-base/treeview-validate-drop-target.md b/knowledge-base/treeview-validate-drop-target.md index cea51331c4..b4c27b29b5 100644 --- a/knowledge-base/treeview-validate-drop-target.md +++ b/knowledge-base/treeview-validate-drop-target.md @@ -159,7 +159,6 @@ This TreeView does not allow the user to drop items from the Documents folder in base.OnInitialized(); } - private void LoadData() { Data = new List() From 9ed730cef81a1134c853d5615fcf6211b7794d95 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Fri, 6 Dec 2024 19:43:48 +0200 Subject: [PATCH 5/6] Update knowledge-base/treeview-validate-drop-target.md Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> --- knowledge-base/treeview-validate-drop-target.md | 1 - 1 file changed, 1 deletion(-) diff --git a/knowledge-base/treeview-validate-drop-target.md b/knowledge-base/treeview-validate-drop-target.md index b4c27b29b5..d6245d6a57 100644 --- a/knowledge-base/treeview-validate-drop-target.md +++ b/knowledge-base/treeview-validate-drop-target.md @@ -155,7 +155,6 @@ This TreeView does not allow the user to drop items from the Documents folder in protected override void OnInitialized() { LoadData(); - base.OnInitialized(); } From e8540dfca9e4d813c25e70d4edb67b4a87c8f882 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Fri, 6 Dec 2024 19:43:53 +0200 Subject: [PATCH 6/6] Update knowledge-base/treeview-validate-drop-target.md Co-authored-by: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> --- knowledge-base/treeview-validate-drop-target.md | 1 - 1 file changed, 1 deletion(-) diff --git a/knowledge-base/treeview-validate-drop-target.md b/knowledge-base/treeview-validate-drop-target.md index d6245d6a57..768709a338 100644 --- a/knowledge-base/treeview-validate-drop-target.md +++ b/knowledge-base/treeview-validate-drop-target.md @@ -148,7 +148,6 @@ This TreeView does not allow the user to drop items from the Documents folder in } var parentDestinationItem = Data.FirstOrDefault(e => e.Id.Equals(destinationItem.ParentId)); - return IsChild(item, parentDestinationItem); }