Tree view

TreeViewControl

A hierarchical tree with folder icons, checkboxes, editing, drag and drop, and a classic VB6 look.

Overview

TreeViewControl renders a list of TreeNodes with nested Children. Nodes expand on click, report selection through SelectedNodeChanged, and can carry a Tag for your own data. Two folder icon sets and UseVb6TreeStyle, which draws the dotted connector lines of the Windows common control, cover modern and migrated screens. Checkboxes, multi-select, inline editing, drag and drop, lazy loading and virtualization are parameters on the same control; this page shows the basics.

Examples

#Project explorer with a node inspector

Click a node to select it and read its properties on the right; click a folder to expand it. The switches change the folder icons and the connector lines.

Example

Razor

Highland Estates Project

Site Development

Clearing & Grubbing

Rough Grading & Drainage

Underground Utilities (Wet/Dry)

Phase 1 - Single Family Lots (1-50)

Phase 2 - Commercial Center

Corporate Standards & Specifications

Selected node

Id: root-1
Text: Highland Estates Project
Children: 3
Expanded: yes
Tag: Project Root

Documentation

Parameters

Parameter	Type	Default	Description
`Nodes`	`List<TreeNode>?`	`null`	Root nodes; each carries its `Children`.
`SelectedNode / SelectedNodeChanged`	`TreeNode?`	—	Single selection, two-way.
`SelectedNodeIds / CheckedNodeIds / ExpandedNodeIds`	`IReadOnlyList<string>?`	`null`	Id lists for selection, checks and expansion, each with a `…Changed` callback.
`OnNodeClick / OnNodeDoubleClick / OnNodeActivated / OnNodeExpand`	`EventCallback<TreeNode>`	—	Node events.
`ToggleOnNodeClick`	`bool`	`true`	A click on a parent expands or collapses it.
`ShowIcons`	`bool`	`true`	Folder and leaf icons.
`FolderStyle`	`TreeFolderStyle`	`Yellow`	`Yellow`, `Grey` or `None`.
`UseVb6TreeStyle`	`bool`	`false`	Dotted connector lines and plus/minus boxes, as in the Windows common control.
`TreeIndentPixels`	`int`	`16`	Indent per level.
`ShowCheckboxes / AutoCheck`	`bool`	`false`	A checkbox per node; AutoCheck ties parents and children.
`AllowMultiSelect`	`bool`	`false`	More than one selected node.
`Height / CssClass / TabIndex / AriaLabel`		`AriaLabel "Tree"`	Size, extra classes, tab order, accessible name.
`AllowEditing · NodeEditing · NodeEditCommitting · NodeEdited`		—	Inline rename, with veto and commit events. Not shown on this page.
`AllowDragAndDrop · CanDrop · NodeMoving · NodeMoved`		—	Drag a node to a new parent, with veto. Not shown on this page.
`EnableVirtualization · ItemSize`	`bool / float`	`false / 32`	Row windowing for large trees; ItemSize is the row height in px.
`LoadChildren`	`Func<TreeNode, CancellationToken, Task<IReadOnlyList<TreeNode>>>?`	`null`	Async child loader for lazy trees.
`NodeTemplate · FilterText · NodeComparer · NodesChanged · Error`		—	Custom node markup, text filter, sort order, change and error callbacks.

TreeNode

Property	Type	Default	Description
`Id`	`string`	—	Key; defaults to a random 8-character string.
`Text`	`string`	`""`	Label.
`IconCss / ExpandedIconCss`	`string?`	`null`	Leaf or folder icon classes; the second is used while expanded.
`IsExpanded / IsSelected / IsChecked / IsDisabled / IsBold`	`bool`	`false`	State flags; `IsIndeterminate` is set by the control.
`Children`	`List<TreeNode>`	`empty`	Child nodes. `HasChildren` is true when there are any, or when children are still to load.
`HasUnloadedChildren`	`bool`	`false`	Marks a node whose children come from `LoadChildren` on first expand; cleared once loaded.
`Tag`	`object?`	`null`	Your own payload.

Keyboard and accessibility

Keyboard model and ARIA output are still to be checked against the source; the control exposes AriaLabel (default "Tree") and TabIndex.