LgTreeView

LgTreeView<TItem> affiche des données hiérarchiques sous forme d'arborescence repliable. Utilisez-le pour naviguer dans des catégories, des dossiers, des structures temporelles ou tout modèle parent-enfants qui doit rester lisible sans tableau.

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

• Espace de noms : Lagoon.UI.Components
• Hérite de : LgComponentBase
• Package NuGet : Lagoon.UI

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Construire une arborescence

La source de données est une TreeNodeCollection<TItem>. Chaque TreeNode<TItem> porte l'objet métier dans Item, ses enfants dans Children, et son état d'ouverture dans 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
{
    // Racine de l'arborescence : elle contient les nœuds de premier niveau affichés par le composant.
    private TreeNodeCollection<string> _nodes;

    // Initialise les nœuds : utile lorsque la hiérarchie est calculée au chargement de la page.
    protected override void OnInitialized()
    {
        base.OnInitialized();
        LoadNodes();
    }

    // Construit une hiérarchie simple : les parents ouverts rendent immédiatement leurs enfants visibles.
    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");
    }
}

Réagir à la sélection d'un nœud

OnNodeClick est déclenché après le clic sur le contenu du nœud. SelectedItem représente le nœud actif ; avec SelectedItemChanged, vous pouvez le synchroniser dans la page ou utiliser @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
{
    // Source affichée : elle est initialisée avec un nœud parent et un enfant sélectionnable.
    private readonly TreeNodeCollection<string> _nodes = new();

    // Nœud courant : il permet à la page de connaître la sélection visuelle du treeview.
    private TreeNode<string> _selectedNode;

    // Prépare un exemple minimal : utile pour disposer d'une sélection dès le premier rendu.
    protected override void OnInitialized()
    {
        base.OnInitialized();
        TreeNode<string> root = _nodes.Add("#RootNode");
        root.Expanded = true;
        _selectedNode = root.AddChild("#ChildNode");
    }

    // Synchronise la sélection : cette méthode est appelée par SelectedItemChanged.
    private Task OnSelectedItemChangedAsync(TreeNode<string> node)
    {
        _selectedNode = node;
        return Task.CompletedTask;
    }

    // Réagit au clic métier : utilisez ce point d'extension pour charger un détail ou filtrer une autre zone.
    private Task OnNodeClickAsync(TreeNode<string> node)
    {
        ShowInformation("#TreeNodeSelected");
        return Task.CompletedTask;
    }
}

Style par défaut ou carte

Kind contrôle uniquement le rendu visuel : TreeviewKind.None utilise le style arborescent standard, tandis que TreeviewKind.Card applique le style nestable. L'état d'ouverture reste porté par chaque nœud via Expanded.

TreeStylePage.razor

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

Masquer, ouvrir et cocher des nœuds

TreeNode<TItem> expose des propriétés utiles à la page : Hidden exclut un nœud du rendu, Expanded ouvre ses enfants, et Checked / CheckNode permettent de gérer un état de coche métier. Le composant ne rend pas automatiquement de case à cocher : si cet état doit être visible, affichez-le dans NodeContent.

TreeNodeStatePage.razor.cs

public partial class TreeNodeStatePage : LgPage
{
    // Racine manipulée par la page : elle sert à illustrer les états disponibles sur TreeNode.
    private readonly TreeNodeCollection<string> _nodes = new();

    // Crée des états avancés : utile pour préparer un arbre filtré ou précoché avant affichage.
    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;
    }
}

Propriétés

Nom	Type	Défaut	Déclaré dans	Description
Nodes	TreeNodeCollection<TItem>	null	LgTreeView<TItem>	Collection racine des nœuds à afficher.
CssClass	string	null	LgTreeView<TItem>	Classes CSS ajoutées au conteneur racine.
Kind	TreeviewKind	TreeviewKind.None	LgTreeView<TItem>	Style visuel appliqué à l'arborescence.
SelectedItem	TreeNode<TItem>	null	LgTreeView<TItem>	Nœud actuellement sélectionné.
NodeContent	RenderFragment<TreeNode<TItem>>	null	LgTreeView<TItem>	Template de contenu d'un nœud ; reçoit le TreeNode<TItem> courant.

Événements

Nom	Type	Description
OnNodeClick	EventCallback<TreeNode<TItem>>	Déclenché lorsqu'un nœud est cliqué.
SelectedItemChanged	EventCallback<TreeNode<TItem>>	Déclenché lorsque le nœud sélectionné change ; permet la liaison de SelectedItem.

Énumérations associées

TreeviewKind

Valeur par défaut : TreeviewKind.None. Cette énumération n'est pas marquée [Flags].

Valeur	Description
None	Style arborescent standard.
Card	Style carte / nestable.

Accessibilité

Le composant gère la navigation clavier au niveau du conteneur : ArrowUp et ArrowDown déplacent le focus, Home et End rejoignent le premier ou le dernier élément, et ArrowRight / ArrowLeft ouvrent ou ferment le nœud ciblé. Fournissez un NodeContent textuel ou un libellé accessible lorsque le contenu contient surtout des icônes. Ne masquez un nœud avec Hidden que si l'information n'est pas nécessaire au parcours utilisateur.

Composants liés

• LgListView pour une collection plate avec rendu personnalisé et sélection multiple.
• LgGridView pour des données tabulaires avec tri, filtres et pagination.