FluentUI.Blazor v4.14

Vue d’ensemble

Bien que l’équipe soit maintenant entièrement concentrée sur la livraison de la future version v5 de la bibliothèque, elle a réussi à publier une mise à jour importante pour la v4. Cette version inclut une fonctionnalité très demandée qui justifie à elle seule le passage à une nouvelle version mineure : le support des données hiérarchiques dans le DataGrid !

Pour cette version 4.14, les points forts incluent :

• DataGrid hiérarchique - Lignes extensibles/réductibles avec l’interface IHierarchicalGridItem
• Mise à jour des Fluent UI System Icons vers la version 1.1.318
• Améliorations de la documentation et du site de démo
• Correction de 3 problèmes supplémentaires du DataGrid
• Améliorations de 5 autres composants avec mises à jour et corrections

Pour un aperçu complet de tous les changements (y compris les versions 4.12 et 4.13), visitez la page What’s New sur le site de documentation.

Qu’en est-il des versions 4.12 et 4.13 ?

Ces deux versions n’ont pas été ignorées - elles ont apporté des améliorations significatives ! Voici un résumé rapide de ce que vous avez peut-être manqué :

Points forts des versions 4.12 & 4.13 :

• Support de .NET 10 - Support complet des templates et version compilée dans le package
• Chargement asynchrone du DataGrid - Meilleures performances pour les grands ensembles de données
• Améliorations de SelectColumn - Options de sélection plus flexibles
• Poignée complète de redimensionnement de colonne - Expérience utilisateur améliorée pour le redimensionnement des colonnes
• Corrections de dispose pour Menu - Résolution des erreurs lors de la suppression des menus
• Améliorations d’AutoComplete - Nouvelles fonctionnalités et capacités de substitution
• Gestion du focus du Dialog - Retourne le focus à l’initiateur à la fermeture, avec typographie d’en-tête personnalisable

Au total, 34 composants ont reçu des modifications, corrections ou améliorations dans ces deux versions. Un merci sincère au groupe croissant de contributeurs qui ont rendu ces améliorations possibles !

DataGrid hiérarchique - La fonctionnalité vedette

L’équipe Aspire utilise des lignes extensibles/réductibles dans leur page Resources du Dashboard depuis un certain temps, mais c’était une implémentation personnalisée spécifique à Aspire. Grâce à la puissance des assistants IA modernes (Claude et Gemini ont aidé !), une solution générique est maintenant disponible qui fonctionne avec n’importe quel type de données de ligne.

La seule exigence ? Les lignes parentes et enfants doivent avoir les mêmes propriétés (c’est-à-dire afficher les mêmes colonnes).

Comment cela fonctionne-t-il ?

La fonctionnalité est alimentée par l’interface IHierarchicalGridItem, qui transforme une liste plate de données en une structure arborescente navigable au sein de la grille. Cette interface fournit les métadonnées nécessaires pour que la grille puisse gérer les relations parent-enfant et les états d’affichage.

Les quatre propriétés clés :

public interface IHierarchicalGridItem
{
    int Depth { get; }           // Niveau dans la hiérarchie (0 pour les éléments racine)
    bool HasChildren { get; }    // Indique s'il faut afficher le bouton d'expansion/réduction
    bool IsCollapsed { get; }    // État de visibilité des descendants
    bool IsHidden { get; }       // Indique si la ligne doit être rendue
}

Indentation visuelle et gestion de l’état

Le FluentDataGrid gère automatiquement les parties complexes du rendu en arborescence :

1. Indentation visuelle : La grille calcule et applique margin-inline-start en fonction de la propriété Depth, garantissant une séparation visuelle claire entre les niveaux.

2. Gestion de l’état : Lorsqu’un utilisateur clique sur le bouton d’expansion/réduction, la grille invoque ToggleExpandedAsync(TGridItem). Cette méthode interne inverse l’état IsCollapsed et déclenche un rafraîchissement des données.

3. Interface plate vers hiérarchique : Bien que les Items ou ItemsProvider sous-jacents fournissent une liste aplatie, la grille utilise les propriétés de l’interface pour décider quelles lignes afficher et comment les styliser.

4. Logique personnalisée : Le callback d’événement OnToggle vous permet d’effectuer des actions supplémentaires, comme le chargement paresseux d’éléments enfants depuis une base de données uniquement lorsqu’un nœud est développé. 👈

Exemple d’utilisation

public class MyDataItem : IHierarchicalGridItem
{
    public string Name { get; set; }
    public int Value { get; set; }

    // Implémentation de IHierarchicalGridItem
    public int Depth { get; set; }
    public bool HasChildren { get; set; }
    public bool IsCollapsed { get; set; }
    public bool IsHidden { get; set; }
}

<FluentDataGrid Items="@hierarchicalData" TGridItem="MyDataItem">
    <PropertyColumn Property="@(x => x.Name)" />
    <PropertyColumn Property="@(x => x.Value)" />
</FluentDataGrid>

Des exemples à 2 niveaux et multi-niveaux ont été ajoutés au site de démo sur la page DataGrid - Données hiérarchiques.

Et oui, la fonctionnalité hiérarchique fonctionne parfaitement avec la fonctionnalité de redimensionnement des colonnes !

Mise à jour des Fluent UI System Icons

La bibliothèque d’icônes a été mise à jour vers la dernière version des Fluent UI System Icons (version 1.1.318). Cela garantit que vous avez accès aux icônes les plus récentes et aux améliorations du système de conception de Microsoft.

<FluentIcon Value="@(new Icons.Regular.Size24.Calendar())" />

Autres améliorations

Au-delà des fonctionnalités principales, cette version inclut :

• 3 corrections de bugs du DataGrid - Stabilité améliorée et gestion des cas limites
• 5 améliorations de composants - Diverses mises à jour et corrections sur plusieurs composants
• Mises à jour de la documentation - Exemples actualisés et explications plus claires
• Améliorations du site de démo - Meilleure présentation des capacités des composants

Corrections diverses

Le reste des corrections et des changements pour cette version est assez étendu. Nous vous renvoyons à la page What’s New sur le site de la documentation ou à la page GitHub release pour un aperçu complet (y compris les liens vers les problèmes et les demandes de modifications sur GitHub).

Web sites

• Documentation: https://www.fluentui-blazor.net
• Preview: https://preview.fluentui-blazor.net
• NuGet packages .NET8: https://aka.ms/blazor/fluentui/libs

Feedback

Si vous trouvez quelque chose qui sort de l’ordinaire, faites-le nous savoir dans le repo sur GitHub, ou Twitter / X.