treeview-disable-checkboxes.md

title	description	type	page_title	slug	tags	res_type	ticketid
How to Disable Checkboxes for Certain TreeView Items	Learn how to disable checkboxes for certain items in the TreeView component based on a condition	how-to	How to Disable Checkboxes for Certain TreeView Items	treeview-kb-disable-checkboxes	blazor, treeview, checkbox, disabled	kb	1681641

Environment

Product

TreeView 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 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 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

<TelerikTreeView Data="@FlatData"
                 @bind-ExpandedItems="@ExpandedItems"
                 CheckBoxMode="@TreeViewCheckBoxMode.Multiple"
                 @bind-CheckedItems="@CheckedItems"
                 OnItemRender="@HandleOnItemRender">
    <TreeViewBindings>
        <TreeViewBinding IdField="Id" ParentIdField="ParentIdValue" TextField="Text" HasChildrenField="HasChildren" IconField="Icon" />
    </TreeViewBindings>
</TelerikTreeView>

<style>
    .@(DisabledCheckboxClass) .k-checkbox {
        opacity: 0.5;
        pointer-events: none;
    }

    .@(DisabledCheckboxClass) .k-treeview-leaf {
        opacity: 0.7;
        pointer-events: none;
    }
</style>

@code {
    private IEnumerable<TreeViewItem> FlatData { get; set; }
    private IEnumerable<object> CheckedItems { get; set; } = new List<object>();
    private IEnumerable<object> ExpandedItems { get; set; } = new List<TreeViewItem>();
    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<TreeViewItem> items = new List<TreeViewItem>();

        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
• TreeView OnItemRender Event