diff --git a/knowledge-base/treeview-disable-checkboxes.md b/knowledge-base/treeview-disable-checkboxes.md new file mode 100644 index 0000000000..5acc93fed4 --- /dev/null +++ b/knowledge-base/treeview-disable-checkboxes.md @@ -0,0 +1,154 @@ +--- +title: How to Disable Checkboxes for Certain TreeView Items +description: Learn how to disable checkboxes for certain items in the TreeView component based on a condition +type: how-to +page_title: How to Disable Checkboxes for Certain TreeView Items +slug: treeview-kb-disable-checkboxes +tags: blazor, treeview, checkbox, disabled +res_type: kb +ticketid: 1681641 +--- + +## Environment + + + + + + + + +
ProductTreeView for Blazor
+ +## Description + +This knowledge base article answers the following questions: + +- How can I apply custom CSS to TreeView items conditionally? +- How to use the [`OnItemRender` event](slug:treeview-events#onitemrender) in the TreeView for Blazor? +- Is it possible to disable checkboxes for certain TreeView items? + +## Solution + +To disable checkboxes for specific TreeView items based on a condition, use the `OnItemRender` event to apply a custom class to those items. Then, use CSS to style these items and their checkboxes as disabled. The following steps outline how to achieve this: + +1. Use the [`OnItemRender` event](slug:treeview-events#onitemrender) of the TreeView component to conditionally apply a custom CSS class. + +2. Define CSS styles that mimic the disabled state for the checkboxes and the items. + +3. Ensure your TreeView model includes a property (e.g., `IsActive`, `IsDisabled`)that you'll use to determine if an item's checkbox should be disabled. + +### Implementation + +````RAZOR + + + + + + + + +@code { + private IEnumerable FlatData { get; set; } + private IEnumerable CheckedItems { get; set; } = new List(); + private IEnumerable ExpandedItems { get; set; } = new List(); + private string DisabledCheckboxClass { get; set; } = "disabled-checkbox"; + + private void HandleOnItemRender(TreeViewItemRenderEventArgs args) + { + var item = args.Item as TreeViewItem; + if (!item.IsActive) + { + args.Class = DisabledCheckboxClass; + } + } + protected override void OnInitialized() + { + LoadFlatData(); + ExpandedItems = FlatData.Where(x => x.HasChildren).ToList(); + } + + private void LoadFlatData() + { + List items = new List(); + + items.Add(new TreeViewItem() + { + Id = 1, + Text = "Root", + ParentIdValue = null, + HasChildren = true, + Icon = SvgIcon.Folder, + IsChecked = false, + IsActive = true + }); + + Random rnd = new Random(); + for (int i = 2; i <= 5; i++) + { + bool hasChildren = rnd.Next(0, 2) == 1; + items.Add(new TreeViewItem() + { + Id = i, + Text = $"Folder {i}", + ParentIdValue = 1, + HasChildren = hasChildren, + Icon = hasChildren ? SvgIcon.Folder : SvgIcon.File, + IsChecked = false, + IsActive = rnd.Next(0, 2) == 1 + }); + + if (hasChildren) + { + for (int j = 1; j <= rnd.Next(1, 4); j++) + { + int childId = i * 10 + j; + items.Add(new TreeViewItem() + { + Id = childId, + Text = $"File {childId}", + ParentIdValue = i, + HasChildren = false, + Icon = SvgIcon.File, + IsChecked = false, + IsActive = rnd.Next(0, 2) == 1 + }); + } + } + } + + FlatData = items; + } + + public class TreeViewItem + { + public int Id { get; set; } + public string Text { get; set; } = string.Empty; + public int? ParentIdValue { get; set; } + public bool HasChildren { get; set; } + public ISvgIcon? Icon { get; set; } + public bool IsChecked { get; set; } + public bool IsActive { get; set; } + } +} +```` + +## See Also + +- [TreeView Overview](slug:treeview-overview) +- [TreeView OnItemRender Event](slug:treeview-events#onitemrender)