Commencer avec le contrôle Blazor TreeView

Dans cet article, nous explorerons le contrôle de Telerik TreeView pour Blazor, qui vous permet d’afficher les hiérarchies très facilement dans vos applications basées sur Blazor, telles que les explorateurs de fichiers, les hiérarchies organisationnelles, etc. Commençons!

Le Blazor Treeview Control de progrès Telerik UI pour Blazor Vous permet d’afficher des données dans une structure hiérarchique en forme d’arbre. Les données que nous ajoutons au contrôle peuvent être plates ou hiérarchiques, et il est également possible de naviguer dans les éléments et leurs enfants. Voyons comment l’intégrer dans un projet Blazor.

Création d’un Blazor TreeView dans votre projet Blazor

La première étape pour utiliser le composant TreeView consiste à préparer votre application en suivant le Telerik Guide d’installation des composants du blazor. Dans mon cas, j’utilise le Application Web Blazor modèle avec un Mode de rendu interactif se mettre à Serveur et un Emplacement d’interactivité se mettre à Mondial.

Supposons que nous créons une application pour lire les livres électroniques, et nous devons afficher une hiérarchie comme Chapitre | Section | Page. Pour résoudre ce problème, j’ai créé un nouveau composant de type page pour implémenter la hiérarchie du livre, en commençant par l’ajout du code suivant:

@page "/book-treeview"

<PageTitle>TreeView Demo</PageTitle>

<div>
    <div class="row">
        <div class="col-md-4">
            <TelerikCard ThemeColor="light">
                <CardHeader>
                    <h3>Table of Contents</h3>
                </CardHeader>
                <CardBody>
                    <TelerikTreeView>
                        
                    </TelerikTreeView>
                </CardBody>
            </TelerikCard>
        </div>
        <div class="col-md-8">
           
        </div>
    </div>
</div>

Dans le code ci-dessus, vous pouvez voir que j’ai implémenté le TelerikTreeView Composant, mais si vous exécutez l’application maintenant, il ne sera pas affiché car il est toujours vide. Nous résoudrons cela à l’étape suivante.

Données de liaison à la propriété de données

Le contrôle TreeView prend en charge deux types de relations parent-enfant. Le premier s’appelle Données platesce qui signifie que la collection complète des éléments TreeView est disponible à un seul niveau, par exemple, List<BookItem>. Le deuxième type est appelé Données hiérarchiquesoù il est prévu qu’une propriété fournie par l’article parent, généralement nommé Itemsexiste. Cette propriété peut également être attribuée en utilisant le ItemsField propriété.

Pour notre exemple pratique, nous choisirons l’approche de données plates en définissant le BookItem classe, qui nous permettra de représenter un chapitre, une section ou une page spécifique. Si vous souhaitez suivre l’exemple, il est important de nommer les propriétés comme indiqué car leur signification sera expliquée plus tard:

public class BookItem
{
    public int Id { get; set; }
    public string Title { get; set; } = string.Empty;
    public int? ParentId { get; set; }
    public bool HasChildren { get; set; }
    public ISvgIcon Icon { get; set; } = SvgIcon.Book;
    public string Description { get; set; } = string.Empty;
    public int PageNumber { get; set; }
}

Une fois le modèle de données prêt, nous pouvons le lier en utilisant le Data propriété. Pour que cette propriété ait des données au démarrage de l’application, j’ai choisi de créer un service qui simule la récupération des données à partir d’une base de données:

public class BookService
{
    public List<BookItem> GetBookStructure()
    {
        List<BookItem> bookStructure =
        [
            new BookItem
            {
                Id = 1,
                Title = "Chapter 1: Introduction",
                ParentId = null,
                HasChildren = true,
                Icon = SvgIcon.Book,
                Description = "An introduction to the main concepts of the book.",
                PageNumber = 1
            },
            new BookItem
            {
                Id = 2,
                Title = "Chapter 2: Core Concepts",
                ParentId = null,
                HasChildren = true,
                Icon = SvgIcon.Book,
                Description = "Exploring the fundamental concepts and theories.",
                PageNumber = 15
            },
            ...
        ];

        return bookStructure;
    }
}

Vous pouvez ajouter ce service à la collection de services de votre application dans Program.cs.

public class Program
{
    public static void Main(string[] args)
    {
        var builder = WebApplication.CreateBuilder(args);
        ...
        builder.Services.AddScoped<BookService>();

        var app = builder.Build();
        ...
    }
}

Ensuite, nous injectons une référence au service et remplissons le Data propriété du composant TreeView en créant et initialisant une propriété appelée BookItems Utilisation du service créé:

@page "/book-treeview"
@using BlazorTreeViewTests.Models
@using BlazorTreeViewTests.Services
@inject BookService BookService

<PageTitle>TreeView Demo</PageTitle>

<div>
    <div class="row">
        <div class="col-md-4">
            <TelerikCard ThemeColor="light">
                <CardHeader>
                    <h3>Table of Contents</h3>
                </CardHeader>
                <CardBody>
                    <TelerikTreeView Data="@BookItems">
                        
                    </TelerikTreeView>
                </CardBody>
            </TelerikCard>
        </div>
        <div class="col-md-8">
           
        </div>
    </div>
</div>

@code{
    private List<BookItem> BookItems { get; set; } = new();
    protected override void OnInitialized()
    {        
        BookItems = BookService.GetBookStructure();
    }
}

Avec le code ci-dessus, vous pouvez voir que le composant TreeView s’affiche dans l’interface graphique:

À ce stade, vous vous demandez peut-être pourquoi l’application affiche les icônes d’arbre mais pas son contenu. Pour comprendre cela, nous devons en savoir plus sur TreeViewbindings, dont nous discuterons ensuite.

Configuration de TreeViewbindings dans le TreeView

Quelque chose d’important à savoir lorsque vous travaillez avec le composant TreeView est qu’il a un ensemble de TreeViewBinding Tags qui permettent la cartographie des propriétés du modèle. Ceux-ci ont certaines valeurs par défaut, qui sont les suivantes:

• Id: Un identifiant unique, requis pour cartographier les données plates. Correspond au IdField TreeViewbinding avec une valeur par défaut de Id.
• Text: Contenu en texte brut de l’élément. Correspond au TextField TreeViewbinding avec une valeur par défaut de Text.
• HasChildren: Indique si l’élément a des enfants, requis pour se lier à des données plates. Correspond au HasChildrenField TreeViewbinding avec une valeur par défaut de HasChildren.
• ParentId: Identifie le parent de l’élément, requis pour se lier aux données plates. Il devrait être nul pour les éléments radiculaires. Correspond au ParendIdField TreeViewbinding avec une valeur par défaut de ParentId.
• Icon: Définit un TelerikFont et SvgIcon. Correspond au IconField TreeViewbinding avec une valeur par défaut de Icon.

Cela signifie que si vous mappez des modèles où les noms de propriétés correspondent aux valeurs par défaut, la liaison sera automatique. Dans notre exemple actuel, le projet fonctionne «partiellement», car la plupart des propriétés du modèle s’alignent avec les valeurs par défaut des TreeViewbindings, sauf pour Text. Si nous voulons que tout fonctionne correctement, nous devons définir explicitement le TreeViewBinding TextField Pour pointer vers le Title propriété comme suit:

<TelerikTreeView Data="@BookItems">
    <TreeViewBindings>
        <TreeViewBinding TextField="Title"
                            ParentIdField="ParentId"
                            HasChildrenField="HasChildren"
                            IconField="Icon" />
    </TreeViewBindings>
</TelerikTreeView>

Le changement ci-dessus se traduit par l’affichage correct du contrôle:

Sélection des éléments dans TreeView

Une autre caractéristique du composant Telerik TreeView est qu’elle permet un mode en lecture seule, une sélection unique ou une sélection multiple. Cela peut être spécifié en utilisant le SelectionMode propriété avec les valeurs None, Single ou Multiple. Puisque, dans notre exemple, nous voulons afficher une page de livre à la fois, nous spécifierons la valeur Single Comme indiqué ci-dessous:

<TelerikTreeView Data="@BookItems"
                    SelectionMode="@TreeViewSelectionMode.Single">
   ...
</TelerikTreeView>

Une fois que nous avons défini comment sélectionner les éléments TreeView, nous pouvons récupérer ces éléments à l’aide du SelectedItems propriété, effectuant le casting approprié au type de modèle correct. Dans notre exemple, nous pouvons utiliser les informations récupérées pour afficher le contenu de la page sélectionnée, ainsi que ses sections enfants si elles existent, comme indiqué ci-dessous:

@page "/book-treeview"
@using BlazorTreeViewTests.Models
@using BlazorTreeViewTests.Services
@inject BookService BookService

<PageTitle>TreeView Demo</PageTitle>

<div>
    <div class="row">
        <div class="col-md-4">
            <TelerikCard ThemeColor="light">
                <CardHeader>
                    <h3>Table of Contents</h3>
                </CardHeader>
                <CardBody>
                    <TelerikTreeView Data="@BookItems"
                                     SelectionMode="@TreeViewSelectionMode.Single"
                                     @bind-SelectedItems="@SelectedItems"
                                     OnItemClick="@OnItemClick">
                        <TreeViewBindings>
                            <TreeViewBinding TextField="Title"
                                             ParentIdField="ParentId"
                                             HasChildrenField="HasChildren"
                                             IconField="Icon" />
                        </TreeViewBindings>
                    </TelerikTreeView>
                </CardBody>
            </TelerikCard>
        </div>
        <div class="col-md-8">
            <TelerikCard>
                <CardHeader>
                    <h3>@(SelectedItem == null ? "Select a chapter or section" : SelectedItem.Title)</h3>
                </CardHeader>
                <CardBody>
                    @if (SelectedItem != null)
                    {
                        <div class="selected-content">
                            <p><strong>Page Number:</strong> @SelectedItem.PageNumber</p>
                            <p><strong>Description:</strong> @SelectedItem.Description</p>

                            @if (ChildItems.Any())
                            {
                                <div class="subsections mt-4">
                                    <h4>Subsections:</h4>
                                    <ul class="list-group">
                                        @foreach (var child in ChildItems)
                                        {
                                            <li class="list-group-item d-flex align-items-center">
                                                <TelerikSvgIcon Icon="@child.Icon" />
                                                <span class="ml-2">@child.Title (page @child.PageNumber)</span>
                                            </li>
                                        }
                                    </ul>
                                </div>
                            }
                        </div>
                    }
                    else
                    {
                        <div class="text-center text-muted p-5">
                            <p>Select a chapter or section from the tree view to see its details.</p>
                        </div>
                    }
                </CardBody>
            </TelerikCard>
        </div>
    </div>
</div>

@code{
    private List<BookItem> BookItems { get; set; } = new();
    private IEnumerable<object> SelectedItems { get; set; } = new List<BookItem>();
    private BookItem? SelectedItem => SelectedItems.FirstOrDefault() as BookItem;
    private List<BookItem> ChildItems { get; set; } = new();
    protected override void OnInitialized()
    {        
        BookItems = BookService.GetBookStructure();
    }

    private void OnItemClick(TreeViewItemClickEventArgs args)
    {
        var selectedItem = args.Item as BookItem;
        if (selectedItem != null)
        {            
            ChildItems = BookItems.Where(x => x.ParentId == selectedItem.Id).ToList();
        }
    }
}

Dans le code ci-dessus, nous lions les éléments sélectionnés à @bind-SelectedItemsqui à son tour met à jour le SelectedChapter propriété avec l’élément sélectionné de l’arbre. Cela remplit enfin la section de contenu de la page du livre. De même, le OnItemClick L’événement est utilisé pour obtenir les éléments enfants s’ils existent, peuple ChildItems propriété. Le résultat final est le suivant:

Le résultat est tout simplement spectaculaire.

Expansion automatique des éléments d’arbre

Dans la section précédente, nous avons démontré comment sélectionner un élément d’arbre en élargissant son contenu. Amélilons davantage les fonctionnalités en faisant en sorte que les chapitres de livre se développent automatiquement lors du lancement de l’application. Nous pouvons y parvenir en utilisant le ExpandedItems Paramètre, qui doit être lié à une liste contenant les éléments que nous souhaitons développer. Vous trouverez ci-dessous l’implémentation dans notre application:

@page "/book-treeview"
@using BlazorTreeViewTests.Models
@using BlazorTreeViewTests.Services
@inject BookService BookService

<PageTitle>TreeView Demo</PageTitle>

<div>
    <div class="row">
        <div class="col-md-4">
            <TelerikCard ThemeColor="light">
                <CardHeader>
                    <h3>Table of Contents</h3>
                </CardHeader>
                <CardBody>
                    <TelerikTreeView Data="@BookItems"
                                     SelectionMode="@TreeViewSelectionMode.Single"
                                     @bind-SelectedItems="@SelectedItems"
                                     @bind-ExpandedItems="@ExpandedItems"
                                     OnItemClick="@OnItemClick">
                        <TreeViewBindings>
                            <TreeViewBinding TextField="Title"
                                             ParentIdField="ParentId"
                                             HasChildrenField="HasChildren"
                                             IconField="Icon" />
                        </TreeViewBindings>
                    </TelerikTreeView>
                </CardBody>
            </TelerikCard>
        </div>
        <div class="col-md-8">
            ...
        </div>
    </div>
</div>

@code{
    ...
    private IEnumerable<object> ExpandedItems { get; set; } = new List<BookItem>();

    protected override void OnInitialized()
    {        
        BookItems = BookService.GetBookStructure();
        
        ExpandedItems = BookItems.Where(x => x.ParentId == null).ToList();
    }
    ...
}

Dans le code ci-dessus, le ExpandedItems La propriété est créée et elle est remplie lors de l’initialisation de l’application avec tous les nœuds qui n’ont pas de nœud parent, c’est-à-dire les nœuds racine. De même, cette propriété est liée au @bind-ExpandedItems Paramètre de TreeView, qui entraîne le comportement suivant lorsque l’application démarre:

Cela améliore l’expérience utilisateur en permettant une navigation plus rapide entre les chapitres du livre.

Conclusion

Tout au long de ce post, vous avez vu la puissance du composant Telerik TreeView pour Blazor. Nous avons exploré comment intégrer le composant dans une application Blazor et les configurer pour charger des données dans un format d’arbre. Maintenant, c’est à votre tour de créer facilement des hiérarchies à l’aide du composant Blazor TreeView. Telerik UI pour Blazor est livré avec un essai gratuit de 30 jours!

Essayez l’interface utilisateur pour Blazor