Modifier une ligne de tableau en cliquant dans Kendo UI pour Angular Data Grid

Ce composant Angular Grid peut permettre aux utilisateurs de visualiser et de modifier eux-mêmes les données. Voir par vous-même!

Lorsqu’ils travaillent avec des données dans nos applications, les utilisateurs souhaitent souvent les visualiser et ont parfois besoin de les modifier. En tant que développeurs, nous devons créer une manière intuitive et attrayante de visualiser et de modifier les données.

Par exemple, nous devrons peut-être créer une grille, combinée à un formulaire contenant des contrôles personnalisés à aligner sur les types de données présents dans chaque ligne ou cellule. Définir la manière dont ces contrôles doivent apparaître et fonctionner peut devenir une tâche difficile et ardue, en particulier lorsque de telles configurations doivent être répétées dans différentes sections.

Une solution qui peut faire gagner du temps à votre entreprise et simplifier les tâches de vos développeurs consiste à tirer parti des capacités du Grille du Progrès Interface utilisateur Kendo pour angulaire. Cet outil vous permet de modifier des lignes entières ou des cellules spécifiques avec précision, vous permettant ainsi de personnaliser et de contrôler l’édition des données de manière transparente.

Plutôt que de détailler chaque fonctionnalité de Kendo UI pour Angular Grid, je vais démontrer à quel point il est simple de permettre aux utilisateurs de modifier des données dans les applications Angular à l’aide d’un exemple pratique. Dans cet article, nous aborderons :

• Installation de Kendo UI pour Angular Grid
• Activation de l’édition de lignes dans Kendo Data Grid
• Implémentation de la validation et mise à jour des données

Scénario

Nous avons fourni une liste de joueurs NBA et souhaitons effectuer les tâches suivantes :

• Afficher la liste des joueurs dans la grille.
• Autoriser la modification des lignes lors d’un clic dans l’élément.
• Assurez-vous que les noms ne sont pas laissés vides.
• Afficher un calendrier lors de la modification de la date.

Allons-y! 🏀

Configurer le projet

Créez une nouvelle application en exécutant la commande dans le terminal :

ng new nba

Répondez à la question CLI avec les options par défaut :

Allez au nba dossier, modifiez le app.component.html et supprimez le code HTML par défaut pour être prêt pour notre prochaine étape.

Installer Kendo UI pour Angular Data Grid

Maintenant, continuez à utiliser le schéma angulaire pour installer l’interface utilisateur Kendo pour Angular Data Grid dans notre application en exécutant la commande suivante dans le terminal.

ng add @progress/kendo-angular-grid

Il ajoute automatiquement le module Kendo UI pour Angular Data Grid au app.module, rendant le composant Kendo UI pour Angular Grid disponible.

Remarque : Si vous utilisez Angular v17 ou une version ultérieure, la valeur par défaut sera autonome dans les nouvelles applications. Les applications autonomes n’ont pas de modules, cette configuration sera donc un peu différente. Essentiellement, après l’installation, vous devrez importer chaque composant de Kendo UI dont vous avez besoin dans les fichiers de composants individuels.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { GridModule } from '@progress/kendo-angular-grid';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GridModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Parfait! Commençons à écrire du code !

Les fausses données

Nous allons utiliser de fausses données pour remplir la grille. À cette fin, nous allons définir un type NbaPlayer et créer une liste d’exemples de données de joueurs NBA.

Commencez par créer un nouveau fichier nommé mock.ts et ajoutez le contenu suivant :

export type NbaPlayer = {
  id: string;
  name: string;
  points: number;
  rebounds: number;
  assist: number;
  height: number;
  captain: boolean;
  startDate: string;
};


export const players: Array<NbaPlayer> = [
  {
    id: '1',
    name: 'LeBron James',
    points: 28,
    rebounds: 8,
    assist: 9,
    height: 6.8,
    captain: true,
    startDate: '10/10/2003',
  },
  {
    id: '2',
    name: 'Stephen Curry',
    points: 32,
    rebounds: 6,
    assist: 6,
    height: 6.2,
    captain: true,
    startDate: '11/11/2009',
  },
  {
    id: '3',
    name: 'Kevin Durant',
    points: 29,
    rebounds: 7,
    assist: 5,
    height: 6.9,
    captain: false,
    startDate: '12/12/2007',
  },
...
]

Obtenez l’ensemble complet des données ici.

Cela jette les bases de notre grille en créant la structure de données requise et en fournissant des exemples de données. Ensuite, nous intégrerons cela à notre composant Kendo UI Grid.

Utilisation de la grille de données

Avant d’utiliser la grille de données de Kendo UI pour afficher et modifier la liste des joueurs, nous souhaitons créer une grille de joueurs de composants pour utiliser le composant Kendo UI pour Angular Data Grid afin de restituer et de modifier les informations sur les joueurs.

Ensuite, à l’aide de la CLI angulaire, nous créerons le players-grid composant utilisant le -t indicateur pour un modèle en ligne, qui empêche la création d’un fichier HTML. Exécutez la commande suivante :

 –ng g c components/players-grid –t

CREATE src/app/components/players-grid/players-grid.component.spec.ts (635 bytes)
CREATE src/app/components/players-grid/players-grid.component.ts (239 bytes)
CREATE src/app/components/players-grid/players-grid.component.css (0 bytes)
UPDATE src/app/app.module.ts (588 bytes)

Ouvrez Players-grid.component.ts et ajoutez une nouvelle propriété appelée Players à lier au tableau de lecteurs. Remplacer <p>players-grid works!</p> avec le kendo-grid composant et liez la propriété data à nbaPlayers.

import { Component} from '@angular/core';

@Component({
  selector: 'app-player-edit-row',
  template: `<kendo-grid [data]="nbaPlayers"
> </kendo-grid>`,
  styleUrls: ['./player-edit-row.component.css'],
})
export class PlayerEditRowComponent {
 nbaPlayers = players;
}

Remarque : Si vous utilisez le mode autonome, vous devrez importer le PlayersGridComponent :

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { PlayersGridComponent } from './components/players-grid/players-grid.component';


@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, PlayersGridComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent {
title = 'nba';
}

Très bien, nous avons configuré avec succès le composant Players-Grid. Maintenant, intégrons-le dans app.component.html.

Ouvrez app.component.html et insérez le <app-players-grid/> composant. Votre code HTML doit ressembler à :

<app-players-grid/>

Après avoir enregistré les modifications, exécutez ng serve -o. L’application devrait maintenant afficher la liste des joueurs.

La magie! La Grille est opérationnelle ! La vraie magie vient de l’interface utilisateur Kendo pour Angular Data Grid. Cela simplifie notre travail en liant automatiquement les propriétés dans la grille lorsque cela est possible. C’est une fonctionnalité que nous allons peaufiner, mais elle est indéniablement pratique.

Les colonnes

Avant de rendre notre grille modifiable, il est crucial de contrôler quelles colonnes seront affichées.

La grille Kendo UI offre le <kendo-grid-column> composant, qui possède deux propriétés : title et field. Ceux-ci nous permettent de définir les colonnes qui seront rendues.

Le nbaPlayers est un tableau de NbaPlayer type, chacun avec un ensemble de propriétés.

export type NbaPlayer = {
  id: string;
  name: string;
  points: number;
  rebounds: number;
  assist: number;
  height: number;
  captain: boolean;
  startDate: string;
};

Nous pouvons lier toutes les propriétés ou en exclure certaines. Lorsque nous voulons spécifier les colonnes auxquelles lier, nous devons utiliser le kendo-grid-column composant.

À l’intérieur de kendo-gridajouter le kendo-grid-column composant. Met le title propriété pour le titre de la colonne et le field propriété pour le champ de colonne.

<kendo-grid
    [data]="nbaPlayers"
  >
     <kendo-grid-column title="ID" field="id"> </kendo-grid-column>
    <kendo-grid-column title="Name" field="name"> </kendo-grid-column>
    <kendo-grid-column title="Points" field="points"> </kendo-grid-column>
    <kendo-grid-column title="Assists" field="assist"> </kendo-grid-column>
    <kendo-grid-column title="Rebounds"field="rebounds"> </kendo-grid-column>
    <kendo-grid-column title="Captain"field="captain"> </kendo-grid-column>
    <kendo-grid-column title="Start Date" field="startDate"> </kendo-grid-column>
  </kendo-grid>

Enregistrez les modifications. Désormais, la grille affichera toutes les colonnes à l’exception de la colonne de hauteur.

Avant de passer au modifiable

Avant de vous lancer dans la création d’une interface permettant aux utilisateurs d’éditer, plusieurs facteurs doivent être pris en compte. Notre objectif est de fournir une excellente expérience utilisateur et de garder le contrôle sur le processus d’édition.

Les considérations importantes comprennent :

• Affichage des contrôles pertinents pour les données. Exemple : lorsque les utilisateurs modifient un numéro, ils doivent rencontrer une saisie numérique pour minimiser les erreurs.
• Surveillance des événements de modification. Exemple : nous devons revenir du formulaire d’édition à la grille une fois que l’utilisateur a terminé ses modifications ou cliqué ailleurs.
• Affichage et liaison des valeurs personnalisées : Exemple : alors qu’une case à cocher conviviale peut indiquer « vrai » ou « faux », nous pouvons souhaiter afficher « Oui » ou « Non » à la place.
• Validation sur le terrain : Exemple : lorsqu’un utilisateur effectue une modification, il doit être informé des champs obligatoires.

Cette liste n’est pas exhaustive puisque nous visons la concision dans cet article. Plutôt que de créer toutes ces fonctionnalités à partir de zéro, nous exploiterons les capacités de l’interface utilisateur Kendo pour Angular Data Grid.

La Kendo UI Grid offre toutes ces fonctionnalités (et bien plus), nous permettant de mettre en œuvre une grille modifiable rapidement et sans douleur. Cette efficacité pourrait bien vous donner un peu plus de temps pour une frénésie Netflix ou un début de soirée à la maison.

Passons au codage !

Rendre l’interface utilisateur Kendo pour la grille de données angulaire modifiable

Angular propose deux méthodes pour travailler avec des formulaires : les formulaires réactifs et basés sur des modèles. De même, l’interface utilisateur Kendo pour Angular Data Grid fournit deux mécanismes pour permettre la modification en utilisant soit le kendoGridReactiveEditing ou kendoGridTemplateEditing directives.

Les directives simplifient les opérations CRUD, que ce soit par cellule ou par ligne. Dans notre scénario, nous opterons pour le réactif approche. Nous préférons les formulaires réactifs car ils exploitent FormBuilder d’Angular, simplifiant la construction de formulaires réactifs et nous permettant de définir notre groupe de formulaires, nos contrôles et nos validations.

En savoir plus sur formes réactives.

Avant de commencer, il est essentiel d’ajouter FormsModule et ReactiveFormsModule à la section importations de app.module.ts. Ensuite, ouvrez le players-grid.component et injectez le FormBuilder à l’aide du constructeur.

export class PlayersGridComponent {
  nbaPlayers = players;
  formBuilder = inject(FormBuilder);

Alternativement, si vous utilisez le mode autonome, vous importerez simplement le FormBuilder dans le tableau d’importation de votre composant :

import { Component, inject } from '@angular/core';
import { GridModule } from '@progress/kendo-angular-grid';
import { players } from '../../../../src/app/mock';
import { FormBuilder } from '@angular/forms';

@Component({
selector: 'app-players-grid',
standalone: true,
imports: [GridModule],
template: `...`,
styleUrl: './players-grid.component.css'
})
export class PlayersGridComponent {
  nbaPlayers = players;
  formBuilder = inject(FormBuilder); 
}

Que devons-nous faire?

Vous vous souvenez que nous avons besoin d’un formulaire ? Nous devons connecter le formulaire à l’interface utilisateur Kendo pour Angular Data Grid à l’aide d’événements, permettant à la grille de passer en mode édition et reliant le champ de la grille au formulaire.

Tout d’abord, créez une nouvelle méthode appelée createFormGroupprendre un NbaPlayer objet en paramètre (il représente une ligne dans notre grille). Utilisez le générateur de formulaire pour créer un formulaire pour chaque champ et lier les valeurs au formulaire.

Le code final ressemblera à :

  private createFormGroup(player: NbaPlayer): any {
    return this.formBuilder.group({
      id: player.id,
      name: player.name,
      points: player.points,
      assist: player.assist,
      rebounds: player.rebounds,
      height: player.height,
      captain: player.captain,
      startDate: player.startDate,
    });
  }

Le formulaire est complet. Ensuite, nous devons configurer la grille pour connecter le formulaire à l’éditeur intégré.

En savoir plus sur le composant de colonne de kendo.

Afficher le composant éditeur

C’est l’une de mes fonctionnalités préférées de Kendo UI pour Angular Data Grid. Il fournit un moyen simple de connecter les données à un composant lié à ces données à l’aide de la propriété editor. Il prend en charge plusieurs types d’éditeurs, tels que les éditeurs numériques, de texte, booléens et de date. L’éditeur affiche une entrée liée à un type spécifique, par exemple :

• Pour les dates, il affiche la puissante interface utilisateur Kendo Calendrier.
• Le texte et les chiffres utilisent respectivement les éditeurs de texte et numérique.
• Les valeurs booléennes utilisent une case à cocher.

Activons ceci pour toutes les colonnes sauf ID.

   <kendo-grid-column title="ID" field="id"> </kendo-grid-column>
    <kendo-grid-column title="Name" field="name" editor="text">
    </kendo-grid-column>
    <kendo-grid-column field="points" editor="numeric"> </kendo-grid-column>
    <kendo-grid-column field="assist" editor="numeric"> </kendo-grid-column>
    <kendo-grid-column field="rebounds" editor="numeric"> </kendo-grid-column>
    <kendo-grid-column field="height" editor="numeric"> </kendo-grid-column>
    <kendo-grid-column field="captain" editor="boolean"> </kendo-grid-column>
    <kendo-grid-column field="startDate" editor="date"> </kendo-grid-column>

Nous avons l’éditeur, mais comment y connecter le formulaire ?

Kendo UI pour Angular Data Grid fournit des fonctionnalités intégrées cellClick et cellClose événements. Nous relierons chaque événement à des méthodes spécifiques pour gérer notre logique d’édition. Commençons par cellClick. Nous l’associerons à une nouvelle méthode nommée cellEditClicken passant l’événement en paramètre.

<kendo-grid
    [data]="nbaPlayers"
     (cellClick)="cellEditClick($event)"
    ....>

La méthode reçoit l’événement et récupère les informations de cellule qu’elle fournit, telles que la ligne, la colonne et l’élément. L’élément est ensuite transmis au createFormGroup méthode pour connecter les formes réactives aux valeurs.

Le code finalisé ressemble à :

cellEditClick(cellEvent: CellClickEvent) {
  cellEvent.sender.editCell(
    cellEvent.rowIndex,
    cellEvent.columnIndex,
    this.createFormGroup(cellEvent.dataItem)
  );
}

Enregistrez les modifications et voyez ce qui se passe.

Oui! Lorsque vous double-cliquez sur une cellule, il crée dynamiquement un texte de saisie, une case à cocher ou même un calendrier, le tout avec seulement quelques lignes de code.

Hmm… quelque chose ne se passe pas comme prévu. Les valeurs n’ont pas été enregistrées et il n’y a aucune validation. Comment pouvons-nous sauvegarder les valeurs et déclencher des validations ?

Ajouter des validateurs

L’entité responsable du formulaire est le FormGroup. Nous pouvons utiliser des validateurs angulaires pour rendre nos formulaires un peu plus stricts. Importer les validateurs depuis import { FormBuilder, Validators } depuis '@angular/forms'; dans le formulaire de déclaration. Au lieu d’utiliser la propriété directement, utilisez un tableau en transmettant la propriété et le validateur.

Exemple : pour le nom, utilisez Validators.required et pour les points, utilisez Validators.min(1).

Le code final ressemble à :

private createFormGroup(player: NbaPlayer): any {
    return this.formBuilder.group({
      id: player.id,
      name: [player.name, Validators.required],
      points: [player.points, Validators.min(1)],
      assist: player.assist,
      rebounds: player.rebounds,
      height: player.height,
      captain: player.captain,
      startDate: player.startDate,
    });
  }
}

Ensuite, nous devons effectuer quelques étapes :

• Mettez à jour la valeur.
• Validez et effectuez la mise à jour uniquement si elle est valide.
• Fermez la ligne.

Pour mettre à jour, nous créons une méthode pour trouver le lecteur et mettre à jour par ID, en utilisant le findIndex méthode de la nbaPlayers tableau.

private updatePlayer(player: NbaPlayer) {
    const playerIndex = this.nbaPlayers.findIndex((p) => p.id === player.id);
    this.nbaPlayers[playerIndex] = player;
  }

Ensuite, connectez le closeCell événement vers une nouvelle méthode, cellCloseClicken passant l’événement et une référence de variable de modèle liée à la grille.

<kendo-grid
    [data]="nbaPlayers"
    #playerGrid
    (cellClose)="cellCloseClick($event, playerGrid)"
            ....>

Ajouter la nouvelle méthode cellCloseClick avec deux paramètres : le event et le GridComponent. Notre méthode effectuera les tâches suivantes :

• Obtenez la valeur et la propriété valide du FormGroup.
• Si valide, appelez la méthode updatePlayer avec la valeur et appeler la méthode closeCell.

Le code final ressemble à :

cellCloseClick(cellEvent: CellCloseEvent, playerGrid: GridComponent) {
  const { value, valid } = cellEvent.formGroup;
  if (valid) {
    this.updatePlayer(value);
    playerGrid.closeCell();
  }
}

Enregistrez les modifications et rechargez l’application. Maintenant, essayez de modifier les valeurs et de jouer avec la grille.

Conclusion

Nous avons configuré avec succès votre interface utilisateur Kendo pour Angular Data Grid pour activer la fonctionnalité cliquer pour modifier les lignes. Rendre notre grille modifiable ajoute non seulement du plaisir, mais simplifie également l’ajout de logique complexe, de validation et bien plus encore. L’introduction de l’édition dans la cellule dans la grille rationalise le processus d’édition pour vos utilisateurs.

Je recommande d’explorer le Documentation de l’interface utilisateur de Kendo plus loin pour exploiter encore plus de fonctionnalités puissantes de la grille !

Si vous n’avez pas encore testé Kendo UI pour Angular, n’oubliez pas qu’il est accompagné d’un essai gratuit de 30 jours.

Essayez Kendo UI pour Angular