LgTreeView

LgTreeView<TItem> displays hierarchical data as a collapsible tree. Use it to navigate through categories, folders, temporal structures, or any parent-child model that must remain readable without a table.

<LgTreeView TItem="string" Nodes="_nodes">
    <NodeContent Context="node">
        <LgLabel Text="@node.Item" />
    </NodeContent>
</LgTreeView>

• Namespace: Lagoon.UI.Components
• Inherits from: LgComponentBase
• NuGet package: Lagoon.UI

Usage

Demo

Try this component in the Lagoon showcase.

Build a tree

The data source is a TreeNodeCollection<TItem>. Each TreeNode<TItem> carries the business object in Item, its children in Children, and its expansion state in Expanded.

ProjectTreePage.razor

<LgTreeView TItem="string" Nodes="_nodes" Kind="TreeviewKind.None">
    <NodeContent Context="node">
        <LgLabel Text="@node.Item" />
    </NodeContent>
</LgTreeView>

ProjectTreePage.razor.cs

public partial class ProjectTreePage : LgPage
{
    // Root of the tree: it contains the top-level nodes displayed by the component.
    private TreeNodeCollection<string> _nodes;

    // Initializes the nodes: useful when the hierarchy is calculated when the page loads.
    protected override void OnInitialized()
    {
        base.OnInitialized();
        LoadNodes();
    }

    // Build a simple hierarchy: open parents immediately render their children visible.
    private void LoadNodes()
    {
        _nodes = new TreeNodeCollection<string>();
        TreeNode<string> applications = _nodes.Add("#ApplicationsNode");
        applications.Expanded = true;
        applications.AddChild("#PortalNode");
        applications.AddChild("#BackOfficeNode");

        TreeNode<string> archives = _nodes.Add("#ArchivesNode");
        archives.AddChild("#ClosedProjectsNode");
    }
}

React to node selection

OnNodeClick is triggered after clicking on the node's content. SelectedItem represents the active node; with SelectedItemChanged, you can synchronize it on the page or use @bind-SelectedItem.

SelectableTreePage.razor

<LgTreeView TItem="string"
            Nodes="_nodes"
            SelectedItem="_selectedNode"
            SelectedItemChanged="OnSelectedItemChangedAsync"
            OnNodeClick="OnNodeClickAsync">
    <NodeContent Context="node">
        <LgLabel Text="@node.Item" />
    </NodeContent>
</LgTreeView>

SelectableTreePage.razor.cs

public partial class SelectableTreePage : LgPage
{
    // Displayed source: it is initialized with a parent node and a selectable child.
    private readonly TreeNodeCollection<string> _nodes = new();

    // Current node: it allows the page to know the visual selection of the treeview.
    private TreeNode<string> _selectedNode;

    // Prepares a minimal example: useful for having a selection from the first render.
    protected override void OnInitialized()
    {
        base.OnInitialized();
        TreeNode<string> root = _nodes.Add("#RootNode");
        root.Expanded = true;
        _selectedNode = root.AddChild("#ChildNode");
    }

    // Synchronizes the selection: this method is called by SelectedItemChanged.
    private Task OnSelectedItemChangedAsync(TreeNode<string> node)
    {
        _selectedNode = node;
        return Task.CompletedTask;
    }

    // React to the business click: use this extension point to load details or filter another area.
    private Task OnNodeClickAsync(TreeNode<string> node)
    {
        ShowInformation("#TreeNodeSelected");
        return Task.CompletedTask;
    }
}

Default or card style

Kind controls only the visual rendering: TreeviewKind.None uses the standard tree style, while TreeviewKind.Card applies the nestable style. The expansion state remains carried by each node via Expanded.

TreeStylePage.razor

<LgTreeView TItem="string" Nodes="_nodes" Kind="TreeviewKind.Card">
    <NodeContent Context="node">
        <LgLabel Text="@node.Item" />
    </NodeContent>
</LgTreeView>

Hiding, expanding, and checking nodes

TreeNode<TItem> exposes useful properties for the page: Hidden excludes a node from rendering, Expanded opens its children, and Checked / CheckNode allow managing a business check state. The component does not automatically render a checkbox: if this state should be visible, display it in NodeContent.

TreeNodeStatePage.razor.cs

public partial class TreeNodeStatePage : LgPage
{
    // Root manipulated by the page: it serves to illustrate the available states on TreeNode.
    private readonly TreeNodeCollection<string> _nodes = new();

    // Creates advanced states: useful for preparing a filtered or pre-checked tree before display.
    protected override void OnInitialized()
    {
        base.OnInitialized();
        TreeNode<string> root = _nodes.Add("#RootNode");
        root.Expanded = true;

        TreeNode<string> visibleChild = root.AddChild("#VisibleChildNode");
        visibleChild.CheckNode(true);

        TreeNode<string> hiddenChild = root.AddChild("#HiddenChildNode");
        hiddenChild.Hidden = true;
    }
}

Properties

Name	Type	Default	Declared in	Description
Nodes	TreeNodeCollection<TItem>	null	LgTreeView<TItem>	Root collection of nodes to display.
CssClass	string	null	LgTreeView<TItem>	CSS classes added to the root container.
Kind	TreeviewKind	TreeviewKind.None	LgTreeView<TItem>	Visual style applied to the tree.
SelectedItem	TreeNode<TItem>	null	LgTreeView<TItem>	Currently selected node.
NodeContent	RenderFragment<TreeNode<TItem>>	null	LgTreeView<TItem>	Node content template; receives the current TreeNode<TItem>.

Events

Name	Type	Description
OnNodeClick	EventCallback<TreeNode<TItem>>	Triggered when a node is clicked.
SelectedItemChanged	EventCallback<TreeNode<TItem>>	Triggered when the selected node changes; allows binding of SelectedItem.

Associated enumerations

TreeviewKind

Default value: TreeviewKind.None. This enumeration is not marked [Flags].

Value	Description
None	Standard tree style.
Card	Card / nestable style.

Accessibility

The component manages keyboard navigation at the container level: ArrowUp and ArrowDown move focus, Home and End move to the first or last element, and ArrowRight / ArrowLeft open or close the targeted node. Provide textual NodeContent or an accessible label when the content consists mainly of icons. Hide a node with Hidden only if the information is not necessary for user navigation.

Related components

• LgListView for a flat collection with custom rendering and multiple selection.
• LgGridView for tabular data with sorting, filtering, and pagination.