L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Une petite grille avec un panneau de mise à jour personnalisé
Vous voulez passer votre temps à ajouter des fonctionnalités et à ne pas utiliser les éléments de base de votre interface utilisateur. Voici comment, dans Blazor, la bonne combinaison de HTML, de code et de composants peut créer une expérience d’édition personnalisée pour une grille Telerik qui occupe le minimum d’espace sur l’écran.
Dans un billet précédent J'ai combiné ASP.NET MVC View, un composant Blazor, à environ une demi-douzaine de composants Telerik UI for Blazor pour créer une page affichant une grille de clients avec une interface à onglets permettant à l'utilisateur de visualiser informations connexes pour tout client sélectionné. Ce que je n’avais pas fait, c’est de permettre à l’utilisateur de mettre à jour ces informations, c’est le sens de cette colonne.
À bien des égards, cet article est inutile: le TelerikGrid implémente update, delete, et enregistrez la fonctionnalité prête à l'emploi . Toutefois, pour tirer parti de cette fonctionnalité intégrée, vous devez ajouter au moins deux colonnes supplémentaires à la grille afin de contenir les boutons qui implémentent l'ajout et la suppression de lignes. Sur un appareil mobile, vous ne voudrez peut-être pas laisser cet espace à l’écran: dans les écrans de petit format, «Plus grand / plus long» est acceptable, mais «plus large» est diabolique (bien que tout placer sur un seul écran soit idéal, bien sûr). Et cela n'aide pas que j'ai déjà ajouté une colonne à ma grille pour permettre à l'utilisateur de sélectionner une ligne
Réduire les colonnes avec un clic et un double-clic
Je vais donc revoir ma grille pour éliminer le bouton HTML en le remplaçant par une image plus petite sur laquelle l'utilisateur peut cliquer (ou appuyer) pour sélectionner un client lors de l'affichage de ses "données associées". Comme image, j'ai utilisé l'icône favicon.ico fournie avec le temple de projet ASP.NET Core par défaut. Pour activer l'affichage des données associées, il suffit de tirer parti de l'événement click pour l'élément Context de la grille (qui contient l'objet affiché dans la ligne actuelle de la grille) pour capturer le client actuel et le placer dans une propriété définie dans le code de mon composant ( currentCustomer ).
Cela me permet de prendre en charge les mises à jour sans ajouter de nouvelle colonne: je mets le code pour activer mon panneau de mise à jour dans l'événement de l'élément de dblclick . Dans ce code, j'ouvre un TelerikWindow pour afficher les données du client actuel et laisse l'utilisateur le mettre à jour (je mets ce code dans une méthode que j'ai appelée EditItem).
Pour incorporer ce code HTML dans un TelerikGrid tout ce que je dois faire est de définir une colonne avec un élément à l'intérieur, puis de placer mon code HTML à l'intérieur. Au départ, ma grille ressemble donc à ceci:
Et voici le code associé:
@functions
{
[Parameter]
private IEnumerable custs {get; ensemble; }
client privé currentCustomer {get; ensemble; }
EditItem vide privé (arguments UIMouseEventArgs)
{
// ...
}
Lorsque l'utilisateur clique une seule fois, j'aimerais également indiquer à l'utilisateur quel client est sélectionné en mettant à jour la couleur d'arrière-plan de l'élément
dans lequel l'élément ![]()
backcolor et en ai changé la valeur selon que le client de la ligne en cours correspond ou non à celui de la propriété currentCustomer .
@if (client == client actuel)
{
backcolor = "rouge";
}
autre
{
backcolor = "gris clair";
}
@functions
{
chaîne privée backcolor = "white";
// ...
} Définition de la fenêtre de mise à jour
La prochaine étape consiste à définir la fenêtre qui s'affiche pour afficher les données et permettre à l'utilisateur de modifier les données du client actuel.
Une remarque cependant: en HTML lorsqu'un utilisateur En cliquant deux fois, l'élément déclenche un événement click suivi d'un événement dblclick . Cela peut vous obliger à écrire un code laid pour empêcher le code d’événement click de s’exécuter avant l’événement "réel" de double-clic. Heureusement pour moi, le fait de cliquer sur un événement avant qu'un événement en double-clic ne me pose aucun problème: il provoque simplement l'affichage des données associées pour le client actuel avant que j'ouvre le panneau de mise à jour. 19659003] J'ai utilisé un TelerikWindow pour créer mon panneau de mise à jour. Le "cadre" de ma fenêtre est facile à définir: j'inclus une section de titre pour afficher le nom du client actuel (afin que l'utilisateur sache qui est en train d'être édité) et deux boutons pour prendre en charge la mise à jour et l'annulation. J'ai aussi fait la fenêtre modale (qui centre également la fenêtre dans la page). Enfin, j'ai utilisé l'attribut ref pour lier ma fenêtre à un champ de mon code ( EditWindow ). J'utilise cette référence dans mon code pour appeler la méthode Open de la fenêtre () pour afficher la fenêtre (plus tard, j'utiliserai la référence pour appeler la méthode de la fenêtre Close () pour masquer la fenêtre).
Voici tout le balisage requis pour créer ce cadre:
Éditer @ currentCustomer.FirstName @ currentCustomer.LastName
Mise à jour
Annuler
Dans mon bloc @functions je dois créer le champ lié à la fenêtre ref de ma fenêtre et ajouter le code pour ouvrir la fenêtre dans le . La méthode EditItem appelée à partir de mon événement dblclick . J'ai aussi ajouté les méthodes que j'appellerai à partir des événements de click des deux boutons de la fenêtre (bien que toutes ces méthodes fassent maintenant fermer la fenêtre):
@functions
{
private TelerikWindow EditWindow;
EditItem vide privé (arguments UIMouseEventArgs)
{
EditWindow.Open ();
}
Mise à jour privée void ()
{
EditWindow.Close ();
}
privé void Fermer ()
{
EditWindow.Close ();
}
// ...
}
Acceptation des entrées et gestion des mises à jour
Désormais, il suffit d'ajouter les composants nécessaires à ma fenêtre pour permettre à l'utilisateur de mettre à jour l'objet Customer dans currentCustomer . propriété. L'objet Customer a quatre propriétés que je laisserai à l'utilisateur mettre à jour:
Prénom et Nom : J'utiliserai TelerikTextBox composants pour them Inscription : Je vais utiliser un composant TelerikDateInput CreditScore : A TelerikNumericTextBox
Juste un rappel: Pour obtenir plusieurs de ces commandes Telerik Pour pouvoir fonctionner correctement, vous devez également inclure le fichier de support JavaScript Telerik (il existe certaines choses que Blazor ne peut pas encore faire…). Cela signifie que vous devrez ajouter cet élément
Source link