Optimiser l’espace dans Blazor DataGrid

Découvrez comment optimiser le port d’affichage disponible avec l’interface utilisateur Telerik pour Blazor DataGrid à l’aide de la nouvelle option de mode compact.

Imaginez ce qui suit : vous demandez un récapitulatif détaillé de votre facture à votre opérateur de téléphonie mobile et, au lieu de visualiser les données via un tableau de données, il envoie un rapport en texte brut. Ce serait un cauchemar à vivre, n’est-ce pas ?

L’affichage des données sous forme de tableau est pratiquement devenu la norme dans de nombreux secteurs et, à ce titre, il convient d’examiner minutieusement sa configuration, en s’assurant qu’elle est optimisée pour l’objectif qu’elle servira et les données qu’elle affichera.

Si vous avez une telle tâche à accomplir, Andrew Coyle a un grand article où il couvre diverses techniques et modèles pour concevoir de meilleurs tableaux de données.

L’une de ces optimisations est la possibilité d’afficher de grands ensembles de données dans un aspect plus serré et plus dense, sans sacrifier aucune des fonctionnalités déjà disponibles. Grille de données fournit. C’est pourquoi nous sommes heureux d’annoncer le mode compact du Progrès de l’interface utilisateur Telerik pour Blazor DataGrid – une option pratique pour réduire la taille de vos tables, offrant une interface plus condensée.

En mode compact, introduit dans R1 2023, le Blazor DataGrid est optimisé pour l’espace, ce qui le rend idéal pour de multiples cas d’utilisation, tels que l’affichage de données financières, ou lorsque l’espace de l’écran est premium, et il est crucial d’adapter tout ce qui est important dans le port de vue. Cela inclut les écrans plus petits tels que les téléphones portables et les ordinateurs portables, où une grille de données traditionnelle peut ne pas tenir sur tout l’écran.

Mais le mode Compact ne consiste pas seulement à économiser de l’espace, il facilite également l’analyse et la recherche rapides des informations dont vous avez besoin, même dans de grands ensembles de données.

Dans cet article de blog, nous expliquerons comment activer le mode compact de l’interface utilisateur Telerik pour Blazor DataTable, ce qu’il fait, comment vous pouvez l’adapter à vos besoins, ainsi que divers paramètres de grille que vous pouvez activer ou désactiver pour optimiser l’espace disponible encore plus loin.

Configuration de votre grille Blazor

La modification de la taille de la grille est assez simple : vous devez fournir une valeur à un seul paramètre, nommé Size. Pour éviter un balisage important avec des déclarations inutiles et/ou facultatives, je fournis un exemple de balisage Grid :

<TelerikGrid Size="@ThemeConstants.Grid.Size.Small"
             Data="@Data">
    <!-- columns fragment -->
</TelerikGrid>

La définition de ce qui précède est suffisante pour aboutir à une mise en page plus condensée de vos données. Mais au lieu de regarder directement la sortie, nous ferions mieux de la comparer avec notre grille actuelle. Pour ce faire, j’utiliserai le thème par défaut de Kendo, mais les résultats sont similaires dans le reste des thèmes :

Il y a un changement évident mais regardons dans les détails. La hauteur de ligne individuelle du tableau est passée de 36 pixels à 28 pixels, tandis que le rembourrage de chaque cellule du tableau est passé de 8 pixels haut/bas et 12 pixels gauche/droite à 4 pixels et 8 pixels respectivement. Cela seul se traduit par environ 20 à 25 % de données en plus affichées verticalement. Quant à l’horizontale, étant donné les petits rembourrages, cela signifierait que plus il y a de données (colonnes), plus l’espace est « économisé ».

Outre le contenu de la table de données elle-même, lors de l’activation du mode haute densité du Blazor DataGrid, la plupart des blocs de construction se réduisent également, tels que la barre d’outils, le FilterRow, le Pager et tous les éditeurs. Notez que vous devez définir explicitement la taille (idéalement en l’alignant sur la taille de la grille, mais pas obligatoire) sur tout contenu arbitraire que vous placez dans les modèles de la grille.

Par exemple, tout contenu dans la barre d’outils elle-même, un bouton de commande ou un balisage personnalisé doit avoir sa taille définie :

<TelerikGrid Size="@ThemeConstants.Grid.Size.Small"
             Data="@Data">
    <TelerikToolBarTemplate>
        <GridCommandButton Command="ExcelExport" Size="@ThemeConstants.Button.Size.Small">Export</GridCommandButton>
    </TelerikToolBarTemplate>
    <!-- columns fragment -->
</TelerikGrid>

Pour peaufiner encore plus cela, consultez notre interface utilisateur Telerik et Kendo Générateur de thèmes– il vous permet de tout styliser, d’un composant entier ou d’une couleur primaire aux personnalisations atomiques, comme le rembourrage mentionné ci-dessus.

Cependant, certains pourraient dire que l’exemple ci-dessus illustre ce qui est essentiellement un exemple de démonstration parfait conçu dans un but précis (données bien alignées, pas de texte/chiffres longs, noms de colonnes courts, etc.) et ils auraient certainement raison. En matière de visualisation de données, il n’y a pas de solution unique (jeu de mots). C’est pourquoi il est important d’activer les fonctionnalités dont vous avez besoin, puis d’appliquer la personnalisation nécessaire pour répondre à vos besoins individuels.

Personnalisation supplémentaire

Ce ne sera en aucun cas une liste complète, mais je vais essayer de couvrir quelques idées grâce auxquelles vous pouvez optimiser encore plus l’espace disponible.

Basculer le menu des colonnes

Parfois, les utilisateurs peuvent ne pas avoir besoin ou ne pas vouloir parcourir tous les points de données. Au lieu de cela, ils pourraient ne s’intéresser qu’à quelques colonnes qui les concernent. En activant le menu Colonne de Blazor DataGrid, les clients ont la possibilité de masquer et d’afficher des colonnes, ce qui est le cas. Pour basculer le menu des colonnes, utilisez le paramètre ShowColumnMenu, comme ceci :

<TelerikGrid ShowColumnMenu="true"
             Data="@Data">
    <!-- columns fragment -->
</TelerikGrid>

Le menu de la colonne peut être configuré et personnalisé encore plus, je vous recommande donc de vérifier son dédié article documentaire.

Regrouper plusieurs champs associés via un modèle de cellule

Au lieu de définir une colonne de tableau pour chaque champ de votre modèle, réfléchissez s’il existe des champs qui pourraient être regroupés et affichés dans une seule colonne. Cela pourrait non seulement économiser de l’espace, mais faciliter la navigation et la recherche de données. Avec un tel changement, vous pouvez passer de ceci :

<GridColumns>
    <GridColumn Title="Client">
        <Template>
            @{
                var item = (Record)context;
            }

                <TelerikAvatar Type="@AvatarType.Image">
                    <img src="@($"./images/{item.ExecutedBy.ImageUrl}")" />
                </TelerikAvatar>
        </Template>
    </GridColumn>
    <GridColumn Title="Name" Field="ExecutedBy.Name"></GridColumn>
    <GridColumn Title="Email" Field="ExecutedBy.Email"></GridColumn>
</GridColumns>

à cela, où plusieurs champs liés sont imbriqués dans un seul modèle de cellule :

<GridColumn Field="@nameof(Record.ExecutedBy)" Title="Client">
    <Template>
        @{
            var item = (Record)context;
        }

        <div>
            <TelerikAvatar Type="@AvatarType.Image">
                <img src="@($"./images/{item.ExecutedBy.ImageUrl}")" />
            </TelerikAvatar>
            <div>
                <span>@item.ExecutedBy.Name</span>
                <span>@item.ExecutedBy.Email</span>
            </div>
        </div>
    </Template>
</GridColumn>

Utiliser le modèle de détail pour afficher des informations supplémentaires

Parfois, une partie des données liées à un enregistrement donné peut n’être nécessaire qu’après un certain filtrage. Dans ce cas, les valeurs facultatives peuvent être omises de la table principale et déplacées vers un volet facultatif, comme une section réductible dans le DataGrid ou une fenêtre modale. Une telle approche pourrait réduire considérablement les données dans le tableau lui-même, ce qui permettrait à la fois d’insérer plus de données et de faciliter la navigation. Voici un exemple du DetailTemplate en action :

Désactiver les étiquettes inutiles

Bien que celui-ci semble plutôt évident, il mérite d’être mentionné compte tenu de l’espace que l’on pourrait économiser sans ajouter certains textes et étiquettes. Par exemple, ne pas ajouter de texte visible à vos boutons, les remplacer par des boutons d’icônes.

Les boutons de commande sont d’excellents candidats pour un tel changement, où le but qu’ils servent pourrait facilement être remplacé par une icône à la place. On pourrait facilement partir de ceci :

pour ça:

Une note importante lors d’une telle modification est de s’assurer que vos boutons restent accessibles, car leur texte d’accompagnement n’est plus là. Vous pouvez y parvenir en définissant une valeur pour l’attribut aria-label du bouton, en vous assurant que l’objectif du bouton sera annoncé à toute personne utilisant des lecteurs d’écran. Le Bouton Telerik expose une AriaLabel paramètre pour cela.

Conclure

Ce ne sont là que quelques-unes des façons dont vous pouvez personnaliser le Interface utilisateur Telerik pour Blazor DataGrid. En fin de compte, il s’agit de recherche, de mise en œuvre et de personnalisation, en s’assurant que la table est optimisée pour l’usage auquel elle servira.

Essayez le mode compact aujourd’hui et voyez comment cela peut vous aider à travailler plus efficacement avec vos données. Nous sommes ravis d’entendre vos commentaires et nous sommes impatients d’améliorer continuellement la fonctionnalité pour mieux vous servir, vous et vos clients.