Fermer

octobre 14, 2019

Traitement par lots avec la grille de Kendo UI pour Angular


Dans ce didacticiel, nous allons voir comment modifier simultanément toutes les lignes d’une grille Kendo UI, en liant efficacement toute la grille à un formulaire angulaire réactif FormGroup et FormArray pour permettre la validation et la sauvegarde de toutes les données de formulaire ensemble au lieu de ligne par ligne, de sorte qu'il se comporte un peu plus comme un formulaire réactif «normal». Cet exemple est construit avec Angular 8.2.6.

L'exemple ci-dessous contient une grille de Kendo UI avec une liste de produits qui s'affiche en mode "affichage" par défaut. Lorsque vous cliquez sur le bouton Modifier, la grille passe en mode «modifier», ce qui rend tous les champs de produit modifiables et permet aux produits d'être ajoutés ou supprimés de la grille. Après l'édition, vous pouvez enregistrer ou annuler les modifications.

Le style de l'exemple est défini à l'aide de Bootstrap 4.3, de l'interface de Kendo pour le thème par défaut angulaire et de quelques styles CSS personnalisés dans le principal index.html [ fichier. Pour plus d'informations sur le style des composants de Kendo UI pour Angular, voir cet aperçu du style .

Le voici maintenant en action:
(Edit sur StackBlitz à l'adresse https://stackblitz.com/ modifier / traitement par lots avec kendo-ui-grille-pour-angular )

Modèle de composant d'application angulaire avec grille de Kendo UI

Le modèle de composant d'application contient la syntaxe HTML et le modèle angulaire pour l'affichage de l'exemple. Kendo UI Grid; elle contient un seul composant encapsulé dans une carte bootstrap pour la présentation.

La grille définit la variable de référence du modèle #grid pour qu'elle soit accessible à partir du composant d'application ci-dessous. avec le décorateur ViewChild ('grille') et la propriété data de la grille est liée à un tableau de produits définis dans le composant d'application utilisant Angular property binding [data] = "products" .

Une barre d'outils différente s'affiche lorsque la grille est en mode "Afficher" ou "Modifier" à l'aide de la propriété isEditMode la propriété " La vue "barre d'outils en mode ne contient qu'un bouton Edit et la barre d'outils du mode" édition "contient des boutons pour Ajouter Enregistrer et Annuler . Chaque barre d'outils est définie à l'aide d'une balise avec la directive kendoGridToolbarTemplate et chaque bouton est lié à une méthode de gestionnaire d'événements dans le composant d'application à l'aide d'un attribut de liaison d'événement angulaire, par exemple. (click) = "onAdd ()" .

Il y a quatre colonnes définies avec l'étiquette – une pour chaque champ de produit et une avec un Supprimer . bouton affiché uniquement lorsque la grille est en mode «édition».

 < div   class  =  "carte  m-3 "  . 19659018]> 
     < h5   class  =  " fiche-tête "  >  Modification par lot avec Kendo UI Grid pour Angular  </  h5 > 
     < div   > 
         < grille de kendo   # grille   [data]  =  " produits "  > 
             < ng-template   * ngIf  =  "! IsEditMode "    kendoGridToolbarTemplate > 
                 < button   (cliquez sur)  =  " onEdit () "    class  =  " bouton-k k-primaire  " >  Edit  </  bouton > 
             </  ng-template > 
             < ng-template   * ngIf  =  " isEditMode "    kendoGridToolbarTemplate > 
                 < button   (cliquez sur)  =  " onAdd () "    class  =  " k-button  " >  Ajouter  </  bouton > 
                 < button   (cliquez sur)  =  " onSave () "    class  =  " k-button  " >  Sauvegarder  </  bouton > 
                 < button   (cliquez sur)  =  " le Annuler () "    classe  =  " k-button  " >  Annuler  </  bouton > 
             </  ng-template > 
             < kendo-grid-column   field  =  " Nom "  >   </  kendo-grid-column > 
             < kendo-grid-column   field  =  " Price "    editor  =  " numérique  "   format  = "  {0: c}  " >   </  kendo-grid-column > 
             < kendo-grid-column   field  =  " InStock "    titre  =  " En Stock  "   editor  = "  boolean  " >   </  kendo-grid -column > 
             < colonne de kendo-grille   * ngIf  =  " isEditMode "  > 
                 < ng-template   kendoGridCellTemplate   let-rowIndex  =  " rowIndex "  > 
                     < button   (cliquez sur)  =  " surRemove (rowIndex) "    class  =  " ] k-button  " >  Supprimer  </  bouton > 
                 </  ng-template > 
             </  colonne de kendo-grille > 
         </  la grille de kendo > 
     </  div > 
 </  div >

Composant d'application angulaire avec grille de Kendo UI

Le composant d'application contient toutes les propriétés et méthodes permettant d'interagir avec notre grille.

Les propriétés du composant

products contiennent l'ensemble des objets de produit liés au grille dans le modèle avec l'attribut de liaison de propriété
= "products" .

originalProducts est utilisé pour conserver une copie du tableau de produits d'origine juste avant de passer en mode "édition", ainsi, les modifications apportées au tableau products peuvent être réinitialisées si le bouton Cancel est cliqué.

productsForm est un groupe réactif angulaire contenant le . FormArray et tous FormControl pour l'ensemble du formulaire afin que tous les champs puissent être validés et enregistrés ensemble.

isEditMode est un indicateur booléen utilisé pour basculer le modèle de composant de l'application. entre les modes “view” et “edit”. [1 9659003] La grille @ViewChild ("grille") contient une référence au composant Grille Kendo UI défini dans le modèle de composant d'application. Le décorateur ViewChild permet d'accéder au composant de la grille à l'aide du paramètre 'grid' car il correspond à la variable de référence du modèle #grid définie dans le kendo- . grille dans le modèle.

Méthodes des composants

ngOnInit () initialise le tableau de produits avec un échantillon de produits et définit le productForm sur un nouveau . ] FormGroup contenant un FormArray destiné à contenir tous les groupes de formes de produits et contrôles. Le groupe de formulaires est créé avec l'instance FormBuilder injectée dans le constructeur du composant.

onEdit () gère le clic sur le bouton Edit pour le convertir. la grille dans une forme éditable. Il crée une copie du tableau products au cas où l'action de montage est annulée, puis appelle deux fonctions d'assistance pour initialiser les contrôles de formulaire et faire basculer toutes les lignes de la grille en mode "édition", et définit enfin isEditMode . true pour afficher les barres d'outils correctes dans le modèle.

onAdd () gère le clic sur le bouton Ajouter pour ajouter une nouvelle ligne de produit au bas de la grille. Il pousse un nouvel objet dans le tableau de produits et un nouveau groupe de formulaires dans le FormArray du productForm puis définit la nouvelle ligne de la grille en mode "édition".

onRemove (index) gère le clic sur le bouton Supprimer pour supprimer la ligne sélectionnée de la grille. Tout d'abord, il ferme toutes les lignes de la grille (les met en mode "affichage"), puis supprime l'objet produit du tableau products et le groupe de fiches produit du FormArray avant de tout définir. les lignes reviennent en mode «édition». J'ai trouvé nécessaire de fermer toutes les lignes avant de les supprimer pour éviter des effets secondaires inattendus de la grille.

onSave () gère les clics sur le bouton Save pour valider et enregistrer le formulaire. Les données. Si le formulaire n'est pas valide, une alerte est affichée et les données ne sont pas enregistrées. Si le formulaire est valide, les données sont «enregistrées» en copiant les données de formulaire mises à jour dans le tableau de produits et en rétablissant le mode "affichage" de la grille. Dans une application réelle, c'est à cet endroit que vous placeriez généralement un appel de service ou d'API pour conserver les données.

onCancel () gère les clics sur le bouton Cancel pour les supprimer. toutes les modifications et repasser la grille en mode "affichage". Il ferme toutes les lignes de la grille pour les remettre en mode "affichage", annule ensuite toutes les modifications en copiant les données de produit d'origine dans le tableau de produits et définit isEditMode sur false pour afficher les barres d'outils correctes dans la fenêtre. modèle.

 import   { Composant  OnInit  ViewChild }   de   '@ angular / core'  ; 
  import   { FormBuilder  FormGroup  FormArray  Validateurs [19459181] de   de  . angular / forms '; 
  import   { Composant de grille }   de  ' @ progress / kendo-angular-grid '; 
@  Composant  ( { sélecteur :   'app'  templateUrl :   'app.component.html' [19659180]} ) 
  classe d'exportation     AppComponent   implémente   OnInit   {
     produits  =   [] ; 
     originalProducts  =   [] ; 
     productsForm :  FormGroup ; 
     isEditMode  =   false ; 
     @  ViewChild  ( 'grid' )  grid :  GridComponent ; 
  constructeur  ( privé  formBuilder :  FormBuilder )   { } 
  ngOnInit  ()   {
  ceci .  produits  =   [
  { Nom :   'Vegemite'  Prix :   2.50  InStock :   true  } 
  { Nom :   'Tim Tams'  Prix :   3.99  InStock :   true  } 
  { Nom :   'Viande Pies' 
 
 Le meilleur outil 2023 pour ta croissance Instagram ! 
 
 
   
 
Source link