Component

BOBTreeSelector

Hierarchical selection with single/multiple modes, optional checkboxes, cascading, and declarative or data-driven trees.

API reference ↗

Single selection

Alpha
Gamma
RAZOR 
<BOBTreeSelector TItem="object"
                 SelectedKeys="_single"
                 SelectedKeysChanged="@(k => { _single = k; StateHasChanged(); })"
                 SelectionMode="TreeSelectionMode.Single"
                 ShowCheckboxes="false">
    <BOBTreeSelectorItem Text="Alpha" Key="alpha" />
    <BOBTreeSelectorItem Text="Beta" Key="beta">
        <ChildContent>
            <BOBTreeSelectorItem Text="Beta 1" Key="beta.1" />
            <BOBTreeSelectorItem Text="Beta 2" Key="beta.2" />
        </ChildContent>
    </BOBTreeSelectorItem>
    <BOBTreeSelectorItem Text="Gamma" Key="gamma" />
</BOBTreeSelector>

Multiple with checkboxes

RAZOR 
<BOBTreeSelector TItem="object"
                 SelectedKeys="_checkbox"
                 SelectedKeysChanged="@(k => { _checkbox = k; StateHasChanged(); })"
                 SelectionMode="TreeSelectionMode.Multiple"
                 ShowCheckboxes="true">
    <BOBTreeSelectorItem Text="Documents" Key="docs">
        <ChildContent>
            <BOBTreeSelectorItem Text="Work" Key="work">
                <ChildContent>
                    <BOBTreeSelectorItem Text="Report.pdf" Key="report" />
                    <BOBTreeSelectorItem Text="Slides.pptx" Key="slides" />
                </ChildContent>
            </BOBTreeSelectorItem>
            <BOBTreeSelectorItem Text="Personal" Key="personal">
                <ChildContent>
                    <BOBTreeSelectorItem Text="Photo.jpg" Key="photo" />
                </ChildContent>
            </BOBTreeSelectorItem>
        </ChildContent>
    </BOBTreeSelectorItem>
</BOBTreeSelector>

Fully expanded

Level 1
Level 2
Level 3
Level 4
RAZOR 
<BOBTreeSelector TItem="object"
                 SelectedKeys="_expanded"
                 SelectedKeysChanged="@(k => { _expanded = k; StateHasChanged(); })"
                 ExpandAll="true"
                 ShowCheckboxes="false">
    <BOBTreeSelectorItem Text="Level 1" Key="l1">
        <ChildContent>
            <BOBTreeSelectorItem Text="Level 2" Key="l2">
                <ChildContent>
                    <BOBTreeSelectorItem Text="Level 3" Key="l3">
                        <ChildContent>
                            <BOBTreeSelectorItem Text="Level 4" Key="l4" />
                        </ChildContent>
                    </BOBTreeSelectorItem>
                </ChildContent>
            </BOBTreeSelectorItem>
        </ChildContent>
    </BOBTreeSelectorItem>
</BOBTreeSelector>

With icons

Messages
RAZOR 
<BOBTreeSelector TItem="object"
                 SelectedKeys="_icons"
                 SelectedKeysChanged="@(k => { _icons = k; StateHasChanged(); })"
                 SelectionMode="TreeSelectionMode.Multiple">
    <BOBTreeSelectorItem Text="Navigation" Key="nav" Icon="@BOBIconKeys.UI.Home">
        <ChildContent>
            <BOBTreeSelectorItem Text="Search" Key="search" Icon="@BOBIconKeys.UI.Search" />
            <BOBTreeSelectorItem Text="Settings" Key="settings" Icon="@BOBIconKeys.UI.Settings" />
        </ChildContent>
    </BOBTreeSelectorItem>
    <BOBTreeSelectorItem Text="Messages" Key="mail" Icon="@BOBIconKeys.UI.Email" />
</BOBTreeSelector>

Properties

BOBTreeSelector

23 rows.
PropertyTypeDefaultDescription
ChildContentRenderFragment?Content rendered inside the component.
ItemsIEnumerable<TItem>?Root items the tree renders. May be when items are registered via ChildContent instead.
KeySelectorFunc<TItem, string>?Returns a stable key for an item. Required for keyboard navigation and lazy loading.
ChildrenSelectorFunc<TItem, IEnumerable<TItem>?>?Returns the children of an item. Use this for in-memory hierarchical data; pair with for lazy trees.
HasChildrenSelectorFunc<TItem, bool>?Returns whether an item has children without loading them. Enables lazy expansion via .
OnLoadChildrenFunc<TItem, Task<IEnumerable<TItem>>>?Called the first time a node is expanded with no in-memory children. Result is cached on the tree.
NodeTemplateRenderFragment<TreeSelectionNode<TItem>>?Custom template for rendering the Node.
DisplayTextSelectorFunc<TItem, string>?Returns the visible text for an item. Defaults to item.ToString().
CacheTreeNodeCache<TItem>?Cache.
ExpandedKeysHashSet<string>?ExpandedKeys.
ExpandedKeysChangedEventCallback<HashSet<string>>ExpandedKeysChanged.
ExpandAllboolExpandAll.
SelectedKeysHashSet<string>?SelectedKeys.
SelectedKeysChangedEventCallback<HashSet<string>>SelectedKeysChanged.
SelectionModeTreeSelectionModeTreeSelectionMode.SingleSelectionMode.
SizeBOBSizeBOBSize.MediumVisual size of the component.
ShowCheckboxesbooltrueWhen , the Checkboxes is shown.
AnimateExpandbooltrueAnimateExpand.
ExpandIconIconKeyBOBIconKeys.UI.ChevronRightMaterial icon name for the Expand.
CollapseIconIconKeyBOBIconKeys.UI.ChevronDownMaterial icon name for the Collapse.
OnNodeClickEventCallback<TreeNodeEventArgs<TreeSelectionNode<TItem>>>Raised when the NodeClick event occurs.
OnNodeExpandEventCallback<TreeNodeEventArgs<TreeSelectionNode<TItem>>>Raised when the NodeExpand event occurs.
OnNodeCollapseEventCallback<TreeNodeEventArgs<TreeSelectionNode<TItem>>>Raised when the NodeCollapse event occurs.

BOBTreeSelectorItem

8 rows.
PropertyTypeDefaultDescription
ChildContentRenderFragment?Child nodes nested inside this node. Each child registers itself recursively against the same tree.
DataObject?Arbitrary payload associated with the node and surfaced through the registration to consumers.
DisabledBooleanWhen true, the node is rendered in a disabled state and ignores activation.
IconIconKey?Material icon name displayed alongside the node text.
InitiallyExpandedBooleanWhen true, the node is expanded the first time the tree renders.
KeyString?Stable identifier for the node. When omitted, a key is derived from the node's position in the tree.
NodeContentRenderFragment?Optional render fragment that replaces the default text/icon layout for this node.
TextString?Visible label of the node.