Comment obtenir une grille de données réactive

Besoin de presser plus de données à l’écran pour votre application Web ? Découvrez l’option de grille compacte désormais disponible dans nos bibliothèques React, Angular, Vue et Blazor !

Les grilles de données peuvent être difficiles à conquérir dans une application Web. De plus en plus, tous les clients semblent avoir besoin d’autant de données physiquement possibles sur un seul écran. Le Kendo UI DataGrid a une nouvelle fonctionnalité astucieuse pour les saveurs React, Angular et Vue (plus dans Telerik UI pour Blazor) qui vous permet facilement de basculer la vue pour insérer plus de données.

Deux lignes supplémentaires sont désormais visibles dans cet exemple :

Tout d’abord, avant de pouvoir activer cette version plus compacte de la grille de données, nous devons l’installer.

A la racine de votre Angulaire projet, allez-y et exécutez cette commande dans votre terminal :

ng add @progress/kendo-angular-grid

Maintenant que vous avez téléchargé la grille de données de l’interface utilisateur de Kendo, vous pouvez l’ajouter n’importe où dans votre application en utilisant cette balise :

<kendo-grid [data]="gridData">
</kendo-grid>

À l’intérieur de la grille, vous définissez les colonnes et les données qui leur appartiennent comme suit :

<kendo-grid [data]="gridData">
    <kendo-grid-column field="ProductID" title="ID"> </kendo-grid-column>
    <kendo-grid-column field="ProductName" title="Name"> </kendo-grid-column>
    <kendo-grid-column field="Category.CategoryName" title="Category"> </kendo-grid-column>
    <kendo-grid-column field="UnitPrice" title="Price"> </kendo-grid-column>
</kendo-grid>

Les données de la grille ci-dessus sont structurées comme ceci dans le fichier TypeScript des composants :

public gridData: Product[] = [
    {
        ProductID: 1,
        ProductName: 'Coffee Milk Tea',
        UnitPrice: 5,
        Category: {
            CategoryID: 1,
            CategoryName: 'Beverages'
        }
    },
    {
       /*...*/
    }
];

En plus du regroupement, du filtrage, de la pagination, du tri, de l’exportation, etc., il existe une nouvelle fonctionnalité dans la grille de l’interface utilisateur de Kendo pour ajuster la taille de la grille à une vue plus compacte. Voyons comment activer cela !

Il existe une option de dimensionnement pour la grille, qui ajuste le rembourrage de tous les éléments de la grille. L’attribut size prend en charge trois options : petit, moyen et aucun (supprime le style lié au dimensionnement).

Découvrez la démo en direct ici : https://stackblitz.com/edit/angular-pu17ff?embed=1&file=src/app/app.component.ts

Vous pouvez voir ici, avec les trois boutons que j’ai créés, la différence entre le défaut (moyen), le petit (option compact) et même à quoi cela ressemble de ne passer aucun à l’option de dimensionnement.

C’est vraiment un nouvel ajout merveilleux à la liste déjà complète des fonctionnalités de la grille d’interface utilisateur de Kendo. MAIS, elle ne se produit pas automatiquement lorsque la taille de l’écran est plus petite/plus grande. Alors, voyons une façon d’accomplir une telle chose.

J’ai donc créé ici un HostListener (la manière angulaire d’attacher un événement pour s’adapter au flux approprié de détection de changement d’Angular). De cette façon, je n’ai pas à me soucier de l’initialiser à la création ou de le supprimer à la destruction – Angular s’en chargera pour moi, car j’ai utilisé un HostListener. Mais cet extrait aura à peu près le même aspect dans React, Vue ou jQuery. En fin de compte, nous utilisons simplement l’accès à la fenêtre de JavaScript pour alerter notre grille de données lorsque la taille de l’écran change ou commence à être plus petite/plus grande.

Cela fait maintenant basculer la taille de la valeur par défaut « moyenne » à « petite » lorsque l’écran est inférieur à 1000 pixels. Découvrez et clonez la démo par vous-même, ici :
https://stackblitz.com/edit/angular-pu17ff?file=src%2Fapp%2Fapp.component.ts.

La syntaxe de la grille pour brancher cet attribut/propriété de taille différente, bien sûr, sera également légèrement différente. Par exemple, voici comment modifier la taille d’un Réagir Grille de données:

Ici, nous voyons définir la taille de la grille sur petite dans React. Pour la démo complète, consultez les documents : https://www.telerik.com/kendo-react-ui/components/grid/sizing.

Voyons maintenant comment procéder dans vue:

Ici, vous pouvez voir les différences côte à côte avec petit activé. Tellement plus de données tiennent dans le même espace ! Ceci est accompli avec cette syntaxe dans la grille de données Kendo UI pour Vue :

Découvrez la démo complète, ici, dans la documentation : https://www.telerik.com/kendo-vue-ui/components/grid/compact-grid!

Interface utilisateur de Kendo pour jQuery aura cette fonctionnalité à partir de R2 2023, et nos composants du côté .NET ajoutent également cette fonctionnalité intéressante ! Découvrez comment y parvenir dans Interface utilisateur Telerik pour Blazor:

La démo complète de Telerik UI pour Blazor DataGrid peut être trouvée ici dans la documentation : https://docs.telerik.com/blazor-ui/components/grid/sizing. Et ce joli billet de blog vous guide à travers un exemple pratique : Présentation du mode compact : optimisez l’espace d’écran disponible avec Blazor DataGrid.

Tant de puissance avec un attribut aussi simple – un ajout très bienvenu aux ensembles de fonctionnalités déjà COMPLETS de Kendo UI et Telerik UI DataGrids! Si vous souhaitez utiliser ces composants sympas mais que vous n’avez pas encore de compte, vous pouvez vous inscrire pour un essai gratuit d’un mois →
https://www.telerik.com/kendo-ui.

Bravo et bon codage, les amis !