L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Mises à jour sophistiquées avec l'interface utilisateur Telerik pour Blazor DataGrid
L'interface utilisateur Telerik pour Blazor DataGrid fournit un ensemble d'événements de cycle de vie que vous pouvez utiliser non seulement pour gérer les mises à jour, les ajouts et les suppressions, mais également pour étendre la grille avec des fonctionnalités supplémentaires, comme un bouton d'annulation, par exemple.
The DataGrid dans Telerik UI for Blazor fournit un ensemble d'événements du cycle de vie que vous pouvez utiliser pour gérer les mises à jour, les ajouts et les suppressions effectuées via la grille. Pour tirer parti de ces événements, il vous suffit de faire deux choses: écrire le code qui met à jour la collection qui pilote votre grille et fournir les contrôles d'interface utilisateur qui permettent à l'utilisateur de déclencher les événements dans lesquels vous insérez le code. La grille prendra soin de du travail lié à l'interface utilisateur pour vous. Une fois que vous avez fait cela, cependant, il ne faut pas beaucoup de code pour tirer parti de ces événements pour implémenter des fonctionnalités plus sophistiquées, y compris un bouton d'annulation.
Configuration de la grille
Avant de profiter des événements de mise à jour (OnEdit, OnCreate, etc.), vous devez configurer le DataGrid pour permettre à l'utilisateur de déclencher les événements. La première étape consiste à affecter des méthodes aux extrémités comme le fait ce balisage (il lie également la grille à une collection dans un champ appelé MyData et utilise l'attribut @ref de la grille pour lier la grille à un champ appelé theGrid):
With les événements câblés, vous devez ensuite ajouter les éléments d'interface utilisateur avec lesquels l'utilisateur interagira. Pour déclencher l'ajout d'une nouvelle ligne à la grille (et, éventuellement, déclencher l'événement OnCreate), vous devez inclure un élément GridToolBar dans votre élément TelerikGrid.
Dans la barre d'outils, vous utiliserez un GridCommandButton, avec son Attribut de commande défini sur Ajouter, pour déclencher l'ajout de nouvelles lignes à la grille. Vous pouvez fournir, entre les balises d'ouverture et de fermeture du GridCommandButton, le texte que vous souhaitez voir apparaître dans le bouton de barre d'outils résultant. L'attribut icon vous permettra d'assigner l'une des icônes standard de Kendo à l'élément de la barre d'outils.
Le balisage d'une barre d'outils typique avec un bouton d'ajout ressemble à ceci:
Add Employee
Pour prendre en charge la modification et la suppression de lignes individuelles, vous devez ajouter un GridCommandColumn dans l'élément GridColumns de TelerikGrid. Dans cette GridCommandColumn, vous pouvez ajouter des boutons pour prendre en charge les activités d'édition et de suppression, comme ceci:
Edit
Delete
Cliquer sur le bouton avec son attribut Command défini sur Edit mettra la ligne en mode d'édition. À ce stade, vous souhaiterez que la colonne du bouton de commande affiche un bouton Mettre à jour (pour commencer le processus d'enregistrement de vos modifications) et un bouton Annuler (pour quitter le mode d'édition sans apporter de modifications). Vous pouvez le faire en ajoutant des boutons Enregistrer et Annuler à l'élément GridCommandColumn et en définissant l'attribut ShowInEdit de ces boutons sur true pour qu'ils n'apparaissent que lorsque la ligne est en mode édition:
Update
Cancel
In your code , pour prendre en charge ce balisage, vous avez besoin des deux champs contenant les données pilotant la grille et le champ lié à l'attribut @ref de la grille:
List MyData;
TelerikGrid theGrid;
Gestion des mises à jour
Vous êtes maintenant prêt à commencer à insérer du code dans vos événements. Vous devrez peut-être utiliser les cinq événements, mais il y a de fortes chances que vous n'ayez besoin que des trois suivants:
- OnUpdate: pour valider les modifications de la collection, la grille est liée à
- OnCreate: pour ajouter un élément à la collection
- OnDelete: pour supprimer un élément de la collection
Tous ces événements sont passés au paramètre GridCommandEventArgs qui a une propriété Item qui contient l'objet que l'utilisateur met à jour, ajoute ou supprime.
Handling Updates
Le code typique d'une méthode de mise à jour consiste à trouver l'emplacement de l'objet correspondant dans la collection et en le remplaçant par l'objet passé dans la propriété Item du paramètre GridCommandEventArgs. Une version de base de la méthode de mise à jour pourrait ressembler à ceci:
Mise à jour des tâches asynchrones (GridCommandEventArgs e)
{
Employé emp = (Employé) e.Item;
int i = MyData.FindIndex (emp => emp.Id == emp.Id);
MesDonnées [i] = emp;
}
Dans la vraie vie, cependant, vous souhaiterez probablement valider les données saisies par l'utilisateur avant d'apporter des modifications. Si les valeurs de la propriété Item échouent à la validation, vous pouvez renvoyer le contrôle à l'utilisateur et laisser la ligne en mode édition en définissant la propriété IsCancelled de GridCommandEventArgs sur true avant de quitter votre méthode de mise à jour. C'est ce que fait cet exemple lorsque l'utilisateur laisse le champ FullName vide:
void Creating (GridCommandEventArgs e)
{
Employé emp = (Employé) e.Item;
if (chaîne.IsNullOrWhiteSpace (emp.FullName))
{
e.IsCancelled = vrai;
revenir;
}
int i = MyData.FindIndex (empl => empl.Id == emp.Id);
MesDonnées [i] = emp;
} Si vous mettez à jour une source de données backend (c'est-à-dire un stockage local ou un service Web), vous pouvez effectuer cette mise à jour dans cette méthode. Vous pouvez également simplement marquer l'objet mis à jour comme modifié et effectuer une mise à jour par lots de tous les éléments marqués lorsque l'utilisateur clique sur un bouton d'envoi.
L'événement OnUpate fonctionne avec l'événement OnEdit qui est déclenché lorsque l'utilisateur clique sur la modification. bouton pour mettre la ligne en mode édition. Vous pouvez utiliser l'événement OnEdit pour récupérer des données à jour à partir de votre source de données (vous ne pouvez pas remplacer l'objet dans la propriété GridCommandEventArags Item, mais vous pouvez modifier ses propriétés). Cet exemple, à la place, met à jour un indicateur sur l'objet pour indiquer qu'il a été modifié:
void Editing (GridCommandEventArgs e)
{
((Employé) e.Item) .Changed = true;
}
L'événement OnCancel est également lié à l'événement OnUpdate. L'événement OnCancel est déclenché lorsque l'utilisateur clique sur le bouton Annuler en mode d'édition (ce qui entraîne également la sortie du mode d'édition de la ligne). À titre d'exemple, ce code redéfinit la propriété Changed de l'objet sur false car l'utilisateur n'effectue aucune modification:
void Canceling (GridCommandEventArgs e)
{
((Employé) e.Item) .Changed = false;
}
Gestion de l'insertion d'éléments
Lorsque l'utilisateur clique sur le bouton Ajouter dans la barre d'outils, une nouvelle ligne est ajoutée à la grille en mode édition. Comme pour les mises à jour, la ligne a à la fois un mode de mise à jour et d'annulation. Cependant, lorsque l'utilisateur clique sur le bouton Mettre à jour pendant un ajout, l'événement OnCreate est déclenché. Dans une méthode liée à l'événement OnCreate, vous souhaiterez ajouter un élément à la collecte de données de la grille. C’est ce que fait cet exemple:
void Updating (GridCommandEventArgs e)
{
MyData.Insert (0, ((Employé) e.Item));
}
Comme pour l'événement de mise à jour, vous souhaiterez probablement rechercher des problèmes avec les entrées de l'utilisateur et rester en mode d'édition si vous rencontrez un problème. Un code comme celui-ci fait l'affaire:
void Updating (GridCommandEventArgs e)
{
Employé emp = (Employé) e.Item;
if (chaîne.IsNullOrWhiteSpace (emp.FullName))
{
e.IsCancelled = vrai;
revenir;
}
MyData.Insert (0, emp);
}
Si l'utilisateur clique sur le bouton Annuler lors de l'ajout d'un nouvel élément, l'événement OnCancel est toujours déclenché, tout comme l'événement Update. Dans l'événement Cancel, si vous souhaitez faire quelque chose de différent lors de l'ajout de nouveaux objets (par opposition à la mise à jour des objets existants), vous pouvez vérifier la propriété GridCommandEventArgs IsNew qui est définie sur true lorsque le processus d'ajout d'un élément est annulé.
La mise à niveau de ma méthode d'annulation précédente pour gérer de nouveaux éléments ressemblerait à ceci, par exemple:
Annulation de tâche asynchrone (GridCommandEventArgs e)
{
si (! e.IsNew)
{
((Employé) e.Item) .Changed = false;
}
}
Lors de l'ajout d'un élément, vous souhaiterez peut-être effectuer un traitement avant que la grille ne soit mise en mode édition. Par exemple, vous souhaiterez peut-être fournir un nouvel objet avec des valeurs par défaut que l'utilisateur pourra modifier plutôt que de lui donner une ligne vide.
Il n’existe pas d’événement au niveau de la grille associé au clic sur le bouton Ajouter dans une barre d’outils, mais vous pouvez remplacer l’attribut Command du bouton par un attribut OnClick défini sur une expression lambda qui appelle votre propre méthode.
Voici un exemple de balisage qui appellera une méthode nommée Adding lorsque l'utilisateur clique sur le bouton Ajouter:
async Task Adding (GridCommandEventArgs e)
{
GridState état = nouveau GridState ();
state.InsertedItem = nouvel employé
{
Id = MyData.Max (e => e.Id) + 1,
HireDate = DateHeure.Now.Date
};
attendre theGrid.SetState (état);
}
Création d'une suppression annulable
Dans l'événement de suppression, tout ce que vous avez à faire est de supprimer l'objet sélectionné de la collection. Pour ce faire, il vous suffit de transmettre la propriété Item de GridCommandEventArgs à la méthode Remove de votre collection:
async void Deleting (GridCommandEventArgs e)
{
MyData.Remove ((Employé) e.Item);
}
Bien sûr, il se peut que vous ne souhaitiez pas supprimer certains employés. Comme pour les autres événements, lorsque vous trouvez que c'est le cas, vous pouvez simplement définir la propriété IsCancelled sur true avant de quitter la méthode. Cependant, contrairement aux mises à jour et aux ajouts, l'annulation d'une suppression n'appelle pas la méthode OnCancel.
Voici un code qui vérifie si les employés ont des amendes impayées avant de les supprimer:
async void Deleting (GridCommandEventArgs e)
{
Employé emp = (Employé) e.Item;
if (emp.OutStandingFines> 0)
{
e.IsCancelled = vrai;
revenir;
}
MyData.Remove (emp);
}
Puisqu'il n'est pas possible de vérifier auprès de l'utilisateur avant de supprimer un élément de la grille, la chose décente à faire est de fournir une fonctionnalité d'annulation simple. Voici un code qui, avant de supprimer un objet Employee de la grille, pousse l'objet (et sa position dans la collection) sur une pile:
Stack deletedEmployees = new Stack ();
Pile deletePositions = nouvelle pile ();
async void Suppression (GridCommandEventArgs e)
{
Employé emp = (Employé) e.Item;
int pos = MyData.FindIndex (e => e.Id == emp.Id);
suppriméEmployés.Push (emp);
deletePositions.Push (pos);
MyData.Remove (emp);
}
Pour fournir la fonctionnalité d'annulation, il vous suffit de deux choses: Réinsérez l'élément supérieur de la pile des employés supprimés dans son ancien emplacement et mettez à jour l'état de la grille:
async void UndoDelete ()
{
MyData.Insert (deletePositions.Pop (), deletedEmployees.Pop ());
GridState état = theGrid.GetState ();
attendre theGrid.SetState (état);
}
La dernière étape de la prise en charge d'une annulation consiste à fournir un bouton permettant à l'utilisateur d'appeler cette méthode UndoDelete (vous devez également vous assurer que le bouton n'est activé que lorsqu'il y a quelque chose à annuler). Ce bouton appartient à la barre d'outils de la grille avec le bouton Ajouter. Voici le balisage requis pour cela:
Annuler
En tirant parti des événements de mise à jour / ajout / suppression du cycle de vie de DataGrid, vous pouvez non seulement fournir à l'utilisateur un environnement complet pour apporter des modifications à ses données, mais également intégrer des fonctionnalités supplémentaires pour les prendre en charge. [19659058]
Source link