Plonger dans la grille de Kendo UI avec Angular

Curieux d'en savoir plus sur tout ce que la grille de Kendo UI pour Angular peut faire? Consultez ce guide pour savoir comment créer rapidement un réseau convivial et dynamique.

J'ai récemment enregistré une série vidéo en 8 parties expliquant comment démarrer avec beaucoup de nos astuces . ] Kendo UI pour composants angulaires . Dans cette vidéo j'ai parlé de de la grille, l'un de nos composants les plus populaires! Cependant, tout le monde n’est pas un observateur vidéo, voici donc un article détaillant toutes les caractéristiques que nous avons décrites dans cet épisode de la Vidéo angulaire 8: Visualisation et manipulation de données avec la grille de Kendo UI !

, si vous êtes un observateur vidéo, vous pouvez visionner la vidéo dans son intégralité ci-dessous:

Structure de base de THE GRID

Vous trouverez un exemple sur notre page de documentation donnant un aperçu de la grille. .

Commencez par vérifier le code source (cliquez sur le bouton Afficher la source dans l'exemple de grille). J'aimerais souligner certaines parties de la structure de base ou de la hiérarchie de notre grille Kendo UI. À l'intérieur de notre composant angulaire et à l'intérieur du gabarit, vous avez cette enveloppe externe de Kendo Grid:

   ...

À l'intérieur de cela, vous avez un tas de colonnes de Kendo Grid:

   
  
  
  
  
  
  
  
  
  
  
    
      ...
    
  

La grille de kendo est l'endroit où nous allons lier des éléments tels que des données ou de hauteur . La liste ne s’arrête pas là cependant. Pour illustrer à quel point notre réseau est flexible et contrôlable, vous pouvez également contrôler les éléments suivants:

• [loading]
• [pageSize]
• [skip]
• [sort]
• [sortable]
• [pageable]
• [scrollable]
• (dataStateChange)

Comme je l’ai mentionné ci-dessus, voici où vous allez aller. et lier les données. Nous avons donc mis en correspondance l'ensemble de la grille avec l'ensemble de données que nous utilisons (nommé gridData dans le composant): [data] = "gridData" .

Ensuite, nous avons donné à chaque colonne un champ qui correspond à un élément de données que la colonne doit représenter. Vous pouvez également fournir le titre qui apparaîtra en haut de la colonne.

.

Si nous consultons products.ts, vous verrez qu'il ne s'agit que d'un tableau de données produit impressionnantes.

Dans notre fichier composant, nous verrons que chacune de ces colonnes de la grille de Kendo reçoit également un ensemble de champs. Et c'est là que vous vous associez, comme vous l'avez probablement deviné, à l'ensemble de données que vous souhaitez y représenter.

ici avec ce StackBlitz si vous voulez! Sinon, continuez à regarder la page de documentation de The Grid.

Si nous passons à l'aperçu, nous verrons que nous avons un identifiant, un nom, un prix, un stock, etc., et qu'ils correspondent à chacun des champs que nous sommes. Nous attribuons également à chacune de nos grilles de Kendo un titre correspondant à ce qui se trouve tout en haut de notre grille.

Redimensionnement [19659005] Le premier trait dans lequel je voudrais m'attarder est le redimensionnement!

Voici l'option permettant à une poignée de saisir le bord d'une colonne et de la redimensionner il soit plus grand ou plus petit. C'est en fait une fonctionnalité très simple à activer et à activer. Pour une documentation détaillée, consultez nos documents sur le redimensionnement de la grille .

Dans notre exemple StackBlitz (voir ci-dessous), à l'intérieur de la balise Kendo Grid, il vous suffit de définir [resizable] = "true" . Cela nous permettra d'avoir un petit dragger pour saisir le bord et redimensionner plus ou moins.

Testez vous-même les colonnes de redimensionnement dans ce StackBlitz!

Directives de liaison des données et filtrage

Parlons maintenant des données. directives contraignantes. Afin de vraiment montrer pourquoi nous voulons utiliser une directive de liaison de données, je vais également montrer notre fonctionnalité de filtrage. Jusqu'ici, à l'intérieur de notre grille Kendo, nous n'utilisions que la liaison de propriété au mot data et le donnions à une valeur égale à celle de la grille contenant tous nos clients. Cependant, nous avons en réalité une directive de liaison de données que vous pouvez utiliser et qui s'appelle Kendo Grid binding: [kendoGridBinding] = "gridData " .

Alors maintenant, si on laisse tout charger, rien ne devrait changer sur notre tableau. Nous devrions voir exactement comment c'était. Mais le véritable pouvoir intervient lorsque vous essayez de manipuler les données du graphique. Que ce soit le filtrage, le tri ou le regroupement.

Essayons de filtrer. Nous allons donc définir [filterable] = "true" . Cela fournira un champ en haut de chaque colonne que nous pouvons taper et filtrer. Donc, si nous souhaitons filtrer par «ana», vous verrez que seuls les noms qui contiennent «A-N-A» figurent dans la colonne des noms.

Différence entre l'utilisation de données et kendoGridBinding

Si nous essayions de filtrer les colonnes avec juste le normale [data] propriété liante, rien ne se passerait, et aucun de nos filtres ne fonctionnerait. Nous devons utiliser le magique et merveilleux kendoGridBinding lorsque nous essayons de manipuler des données dans notre grille. Vous pouvez jouer sur ce StackBlitz pour voir les différences entre la liaison à données vs kendoGridBinding .

La liaison de données est davantage une fonction statique, juste une tape dans notre liaison de données. Il est préférable que vous ayez simplement voir les données sans les manipuler. Tandis que la reliure Kendo Grid est plus utile pour les choses qui vont être plus dynamiques et qui ont des options de filtrage et de tri.

Les autres opérations en réseau intéressantes comprennent le regroupement et et le groupe dont nous parlerons plus bas. Ils seront placés de la même manière que redimensionnable et le tri est placé sur la grille de kendo avec liaison de propriété.

   ...

Le kendoGridBinding est donc extrêmement puissant! Vous pouvez en savoir plus à ce sujet dans nos documents sous nos directives de consolidation des données . Nous avons également quelques options personnalisables pour que vous puissiez aller de l'avant et créer votre propre directive. Mais pour le reste de nos démonstrations, nous allons utiliser le kendoGridBinding .

Grouping

Parlons maintenant de la fonctionnalité de regroupement de la grille de Kendo UI. Sous filtrable nous allons ajouter une propriété groupable groupable et la mettre à un niveau égal à true .

Maintenant, tout en haut de notre grille, vous devriez voir quelque chose qui dit: «faites glisser un en-tête de colonne et déposez-le ici pour regrouper par colonne», ce qui est littéralement ce que vous devez faire. Vous voyez donc me regrouper par nom de contact en faisant glisser l'en-tête de colonne:

Vous pouvez également grouper par plusieurs colonnes. Ils commencent juste à imbriquer les unes sous les autres:

Si vous le souhaitez, vous pouvez définir une valeur par défaut. pour grouper. Nous pourrions donc définir [group] = "[{ field: 'City' }] " . Ceci, par défaut, va placer la ville en haut et la grouper par charge. Donc, si vous souhaitez que les données soient initialement regroupées par rapport à votre entreprise ou à votre cas d'utilisation, vous pouvez les définir avec [group] = "… " .

? Indice utile:

Dans nos docs, nous suivons les étapes pour gérer les événements groupChange et dataStateChange . Celles-ci sont nécessaires si vous n'utilisez pas de données locales avec kendoGridBinding .

Pour activer le regroupement:

1. Définissez le [groupable] (https://www.telerik.com/kendo-angular-ui -develop / components / grid / api / GridComponent / # toc-groupable) et [group] (https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/GridComponent/ # toc-group) Options de la grille.
2. Traitement de la [groupChange] (https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/GridComponent/#toc -groupchange) ou l'émission [dataStateChange] (https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/GridComponent/#toc-datastatechange) événement. 19659067] Grouper manuellement les données. La grille de Kendo UI pour Angular prévoit que les données groupées seront une collection de [GroupResults] (https://www.telerik.com/kendo-angular-ui-develop/components/dataquery/api/GroupResult/) .

Tri

Si nous voulons pouvoir trier, nous plaçons simplement [sortable] = "true" sur notre grille de kendo . Cela rendra chaque colonne cliquable afin que vous puissiez trier par ordre croissant ou décroissant!

Avec le paramètre par défaut triable = true, vous ne pouvez trier que par colonne. Mais nous avons plusieurs options. Ainsi, au lieu de passer un booléen à sortable, vous pouvez passer un objet qui vous permet de spécifier des éléments tels que la possibilité d'annuler le tri ou le tri sur plusieurs colonnes! Regardez ça ici:

Si vous avez trop de données à afficher de manière raisonnable dans une table, vous pouvez utiliser la pagination et le défilement pour résoudre ce problème. En définissant [pageable] = "true" puis en définissant la quantité de données que vous souhaitez afficher par "page" [pageSize] = "8" vous pouvez obtenir une grille astucieuse de plusieurs pages! Je suggère de ne mettre aucun [scrollable] pour des raisons de lisibilité. [scrollable] = "'none'" .

Vous pouvez également transférer un objet d'informations configurables dans [pageable] :

[pageable] = "{
  buttonCount: buttonCount,
  pageSizes: [5, 10, 20],
  ...
} "

buttonCount contrôle les boutons numérotés en bas. Il s’agit simplement de contrôler le nombre de boutons que nous aimerions voir à la fois. Nous passons également des tailles de page. Nous avions initialement défini huit pour un taille de page pour déterminer le nombre d'éléments à afficher simultanément sur une page. Cependant, nous pouvons également définir pageSizes sur un tableau de tailles que l'utilisateur pourra choisir parmi lui-même!

Eh bien, c’est tout le temps dont nous disposons pour couvrir la grille, mais je vous encourage vraiment à de plonger dans nos docs nous en avons tellement Si vous êtes nouveau dans Kendo UI pour Angular, vous pouvez en apprendre davantage ici ou simplement vous lancer dans un essai gratuit aujourd'hui. J'espère vraiment que vous vous êtes bien amusés et happy coding everyone!