Création de SPA dans Blazor avec TelerikGrid et TelerikTabStrip

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 juste  OnEdit = "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 attribut  Icon  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'objet  GridCommandEventArgs  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 objets  Customer je peux transtyper cette propriété Item en un objet  Customer . Je vais placer cet objet  Customer  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  sur  true ce qui empêche l'affichage de la ligne sélectionnée. À ce stade, ma méthode  DisplayDetail  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 TabPosition  de  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 attribut  Title  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 champ  currentCustomerTabDisable : 
 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éthode  SetActiveTab ) et l'onglet (pour que je puisse le transmettre à la méthode  SetActiveTab ), 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'interface  ITab ce qui suggère qu'il peut exister plusieurs types d'onglets dans le futur. Pour soutenir cette possibilité, je déclare mon  currentCustomerTab  comme un  ITab : 
 @functions {
  tabStrip privé TelerikTabStrip;
  private ITab currentCustomerTab;
  // ...
} 
 Avec ces références aux  TelerikTabStrip  et  TelerikTab je peux mettre à jour ma méthode  DisplayDetail  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.