Tree View

Tree View

Displays hierarchical data with expand/collapse, single or multi-select, checkboxes, and optional drag-and-drop reordering.

Basic

Nested file tree. Click a node to select it; selected item's ID is reported below.

README.md
blazor-ui.sln

Checkboxes

Checkbox state is tracked via CheckedValues. Nodes show check, empty, or indeterminate state.

Alice Chen (CEO)
Bob Smith (CTO)
Carol Lee (SWE)
Dave Park (SRE)
Eva Brown (CPO)
Frank Wu (PM)
Grace Kim (Design)

No items checked.

Feature Installer

PropagateChecks=true: checking a package group selects all features inside it; a partially-selected group shows an indeterminate state.

Select Features to Install
Core Platform
Runtime Engine
CLI Tools
SDK & Build Tools
Developer Tools
Debugger
Profiler
Test Runner
Code Formatter
Documentation
API Reference
Tutorials & Guides
Cloud Integrations
Amazon Web Services
Lambda Functions
S3 Storage
RDS Database
Microsoft Azure
Google Cloud Platform
UI Framework
Core Components
Data Display
Charts & Graphs
No features selected

Multi-Select

SelectionMode.Multiple + Ctrl/Cmd lets you select several nodes.

Alice Chen (CEO)
Bob Smith (CTO)
Carol Lee (SWE)
Dave Park (SRE)
Eva Brown (CPO)
Frank Wu (PM)
Grace Kim (Design)

Flat Data with ParentField

Pass a flat list — ValueField + ParentField build the hierarchy.

Expand All & Show Lines

DefaultExpandAll opens every node; ShowLines draws connecting guides.

src
NeoUI.Blazor
Components
Button.razor
Card.razor
wwwroot
app.js
NeoUI.Demo
Pages
Index.razor
README.md
blazor-ui.sln

Search / Filter

Bind SearchText to filter visible nodes. Parents are kept visible when a descendant matches; matched text is highlighted.

src
NeoUI.Blazor
Components
Button.razor
Card.razor
wwwroot
app.js
NeoUI.Demo
Pages
Index.razor
README.md
blazor-ui.sln

Loading & Error States

Pass LoadingNodes and ErrorNodes to show per-node async feedback. OnRetryLoad fires when the user clicks Retry.

README.md

Expand a folder → simulates loading → error → click Retry to succeed.

Load Children Async

Set LoadChildrenAsync and the tree manages loading, error and caching automatically — no extra state needed.

README.md

Children are fetched once and cached. Retry clears the cache for that node.

API Reference

TreeView component parameters.

Prop Type Default Description
Items IEnumerable<TItem>? null Data source. Use ChildrenProperty for nested or ParentField for flat mode.
ValueField Func<TItem, string>? null Extracts the unique string identifier for each node.
TextField Func<TItem, string>? null Extracts the display label for each node.
ChildrenProperty Func<TItem, IEnumerable<TItem>?>? null Returns child items for nested data.
ParentField Func<TItem, string?>? null Returns the parent's ValueField for flat data.
IconField Func<TItem, string?>? null Returns a LucideIcon name for each node.
SelectionMode TreeSelectionMode None None, Single, or Multiple.
SelectedValue string? null Selected node's value (single mode, two-way binding).
SelectedValues HashSet<string>? null Selected nodes' values (multi mode, two-way binding).
Checkable bool false Shows checkboxes; use CheckedValues/@bind-CheckedValues.
CheckedValues HashSet<string>? null Checked node values (two-way binding).
PropagateChecks bool false When true, checking a parent checks all descendants; partial selection shows indeterminate on ancestors.
DefaultExpandAll bool false Expands all nodes on first render.
DefaultExpandDepth int? null Auto-expands to this depth on first render.
ShowLines bool false Draws connecting lines between sibling nodes.
Draggable bool false Enables drag-and-drop reordering.
AllowDrag Func<TItem, bool>? null Per-item predicate to restrict draggable nodes.
SearchText string? null Filters and highlights nodes matching this text. Parents of matching nodes stay visible.
LoadingNodes HashSet<string> [] Node values currently in async loading state — shows spinner.
ErrorNodes HashSet<string> [] Node values that failed to load — shows Retry button.
OnRetryLoad EventCallback<string> Fires when user clicks Retry on a failed node.
LoadChildrenAsync Func<TItem, Task<IEnumerable<TItem>>>? null When set, called on first expand; tree manages loading/error/cache automatically. Throw to trigger error state.
OnNodeClick EventCallback<string> Fires when a node is clicked.
OnNodeExpand EventCallback<string> Fires when a node is expanded.
OnNodeCollapse EventCallback<string> Fires when a node is collapsed.
OnNodeDrop EventCallback<(string, string, string)> Fires when a drag-drop completes.

Reconnecting...

Attempting to rejoin the server

Connection Lost

Retrying in seconds

Connection Failed

Failed to rejoin the server.
Please retry or reload the page.

Session Paused

The session has been paused by the server

Resume Failed

Failed to resume the session.
Please reload the page.