La nouvelle interface utilisateur Telerik pour Blazor comporte davantage de contrôles que la seule grille et ils collaborent très bien pour créer des interfaces utilisateur riches pour les applications à page unique.
Le TelerikGrid
in Telerik UI for Blazor est un puissant outil d'affichage de plusieurs rangées d'objets. Cependant, une grille ne peut parfois pas fournir une interface complète aux données. Lorsque cela se produit, pour la solution la plus extensible, vous pouvez offrir à l'utilisateur la possibilité de passer d'une vue à la vue souhaitée. En intégrant les TelerikGrid
et le TelerikTabStrip
vous pouvez laisser l’utilisateur sélectionner l’élément souhaité dans une grille dans un onglet, puis basculer vers un autre onglet qui affiche des informations supplémentaires.
Le code source de cet article est disponible sur GitHub: TelerikBlazorUIComponents
Configuration d'événements dans le TelerikGrid
La première étape de ce processus consiste à donner à l'utilisateur la possibilité de sélectionner une ligne dans le TelerikGrid
. Au moment d'écrire ces lignes, il n'y avait pas de méthode native pour sélectionner un élément dans la grille (bien qu'il y en aura une), mais vous pouvez utiliser plusieurs options, notamment la définition d'un modèle comprenant un bouton de sélection. Pour ce poste, toutefois, j'ai choisi d'exploiter l'architecture d'événements de TelerikGrid
.
Pour accéder à TelerikGrid
ajoutez d'abord l'élément à le balisage de la grille, comme ceci (pour en savoir plus sur le
TelerikGrid
[Ed Note: formerly KendoGrid] voir mon précédent post ):
Comme je l'ai dit, il n'y a pas de OnSelect
] événement dans la grille, il existe de nombreux autres événements (y compris OnDelete
OnUpdate
OnCreate
et OnCreate
. Par exemple, je peux convertir l'événement
OnEdit
existant en événement d'interface utilisateur «sélectionner une ligne» en le liant à une méthode dans le bloc de fonctions de ma page. J'ai appelé la méthode DisplayDetail
:
DisplayDetail
. Cependant, j'aurais pu atteindre le même objectif avec justeOnEdit = "DisplayDetail"
.Pour donner à l'utilisateur un outil de sélection d'une ligne, j'ai ensuite ajouté un
TelerikGridCommandColumn
en tant que première colonne de mon élément. Dans cet élément, je peux ajouter plusieurs boutons à la colonne à l'aide de l'élément
- dans ce cas, je n'ai besoin que d'un seul bouton. L'attribut
Command
du bouton me permet de lier le bouton à l'un des événements spécifiés dans l'élément(évidemment, dans cet exemple, je vais utiliser l'événement «Edit»). De plus, le
TelerikGridCommandButton
a un attributIcon
qui me permet de spécifier une icône à afficher dans le bouton; Je peux également fournir du texte entre les balises open et close de l'élément à afficher en tant que légende du bouton. Dans ce cas, je suis resté avec l'icône d'édition par défaut et j'ai remplacé le texte de la légende par «Select»:Select
Traitement de l'événement
Maintenant, je dois écrire la méthode qui va capturer et traiter l'événement. J'ai appelé mon événement
DisplayDetail
et je dois le faire accepter l'objetGridCommandEventArgs
que la grille lui transmettra. Le squelette de cette méthode ressemble à ceci:@functions { public void DisplayDetail (GridCommandEventArgs e) { // ... } // ... }
L'objet
GridCommandEventArgs
a une propriété Item qui pointe vers l'objet affiché dans la ligne sélectionnée par l'utilisateur. Comme ma grille affiche des objetsCustomer
je peux transtyper cette propriété Item en un objetCustomer
. Je vais placer cet objetCustomer
dans un champ à utiliser dans d'autres parties de mon interface utilisateur:private Client currentCustomer; public void DisplayDetail (GridCommandEventArgs e) { currentCustomer = (Client) e.Item; }
Par défaut, la grille va également mettre la ligne que j'ai sélectionnée en mode édition. Pour éviter cela, j'ai défini
GridCommandEventArgs.IsCancelled
surtrue
ce qui empêche l'affichage de la ligne sélectionnée. À ce stade, ma méthodeDisplayDetail
ressemble à ceci:public void DisplayDetail (GridCommandEventArgs e) { currentCustomer = (Client) e.Item; e.IsCancelled = true; }
L'étape suivante consiste à afficher les informations de la ligne dans un formulaire plutôt que sous la forme d'une ligne dans une grille. Pour gérer cela, je vais profiter du
TelerikTabStrip
.Configuration des onglets
Ce que je vais faire est de configurer deux onglets dans le
TelerikTabStrip
. : un onglet pour afficher la grille et un pour afficher les données de la ligne sélectionnée.Il est facile de déplacer ma grille dans un onglet: je viens d’envelopper le balisage de ma grille dans un élément
dans un
TelerikTabStrip
. J'utiliserai l'attribut TabPositionde
TelerikTabStrip
pour afficher les onglets en haut de ma page. J'ajouterai également un deuxième onglet pour afficher le client individuel. Avec les deux onglets, j'utiliserai leur attributTitle
pour définir le texte affiché en haut de l'onglet:
Dans un premier temps, je souhaite que l'onglet «Client actuel» soit désactivé et activé uniquement après la sélection d'un client. Pour gérer l'activation / la désactivation des onglets, je dois associer l'attribut
Disabled
de l'onglet à un champ ou une propriété que je peux définir à partir de code. J'appellerai ce champcurrentCustomerTabDisable
:private bool currentCustomerTabDisable = true;
Maintenant, dans mon
DisplayDetail
code, après avoir récupéré le code du client sélectionné. ]J'ai défini le champ sur
false
:public void DisplayDetail (GridCommandEventArgs e) { Client cust = (Client) e.Item; e.IsCancelled = true; currentCustomerTabDisable = false; StateHasChanged (); }
Bien sûr, cela ne servira à rien si je noue également l'attribut
Disabled
de mon onglet au champ. Ce balisage ressemble à ceci:
Affichage du client sélectionné
Cela étant réglé, la dernière étape consiste à afficher les informations du client sélectionné
dans le deuxième onglet. C'est du «vieux code Blazor»: j'ajoute des zones de texte au deuxième onglet et j'utilise l'attribut bind pour associer la zone de texte à mon champ
currentCustomer
. Ce balisage ressemble à ceci:
Etant donné que l'attribut bind implémente la liaison de données bidirectionnelle, les modifications apportées dans «l'onglet client actuel» sont automatiquement reflétées dans la grille.
Bien sûr, si j'étais un être humain décent, je ne le ferais pas. Il suffit d’activer l’onglet «Client actuel», je voudrais également basculer l’utilisateur sur cet onglet. Je peux le faire en appelant la méthode
SetActiveTab
en passant une référence à l'onglet que je veux afficher. Cependant, pour accéder à l'onglet tabstrip (pour pouvoir appeler sa méthodeSetActiveTab
) et l'onglet (pour que je puisse le transmettre à la méthodeSetActiveTab
), il me faut tout d'abord des références aux deux. C'est un processus en trois étapes.Premièrement, j'ajoute l'attribut
ref
àen le liant à un champ du bloc de ma fonction appelé "tabStrip":
De la même manière, ce balisage relie l'onglet à un champ appelé
currentCustomerTab
:
La deuxième étape consiste à ajouter ces champs à mon bloc de fonctions. A
TelerikTab
implémente l'interfaceITab
ce qui suggère qu'il peut exister plusieurs types d'onglets dans le futur. Pour soutenir cette possibilité, je déclare moncurrentCustomerTab
comme unITab
:@functions { tabStrip privé TelerikTabStrip; private ITab currentCustomerTab; // ... }
Avec ces références aux
TelerikTabStrip
etTelerikTab
je peux mettre à jour ma méthodeDisplayDetail
pour faire basculer l'utilisateur sur le deuxième onglet:. ] public void DisplayDetail (GridCommandEventArgs e) { currentCustomer = (Client) e.Item; e.IsCancelled = true; currentCustomerTabDisable = false; tabStrip.SetActiveTab (currentCustomerTab); StateHasChanged (); }
L’une des caractéristiques intéressantes de cette conception est qu’elle est pratiquement extensible à l’infini: à mesure que vous ajoutez des fonctionnalités propres au client sur cette page, vous pouvez continuer à ajouter de nouveaux onglets. Et tout ce que cela vous coûtera, c'est du balisage et environ une demi-douzaine de lignes de code.
Les commentaires sont désactivés en mode Aperçu.
Source link