Interface utilisateur Telerik pour Blazor 2.10.0 Gains ListView, Pager, Checkbox

Découvrez les dernières fonctionnalités de Telerik UI pour Blazor, y compris les nouveaux composants natifs, les fonctionnalités de Grid et bien plus encore. Et n'oubliez pas de récupérer votre ebook Blazor gratuit!

L'interface utilisateur Telerik pour Blazor 2.10.0 est arrivée et propose trois nouveaux composants natifs prêts pour la production Blazor, de nouvelles fonctionnalités Grid et de multiples améliorations. ! Notre interface utilisateur pour la bibliothèque Blazor comprend désormais de nouveaux composants ListView, Pager et Checkbox, Blazor Grid Frozen Columns, WebAssembly 3.2.0 Preview 3 Compatibility, un ebook Blazor gratuit et plus encore!

Plongeons dans la version 2.10.0 et examinons en détail toutes les améliorations que vous pouvez apporter à vos applications Blazor.

L'interface utilisateur Telerik pour Blazor prend en charge à la fois le côté serveur et WebAssembly 3.2.0 Aperçu 3

L'aperçu 3 de Blazor WebAssembly est sorti et il apporte le contenu attendu depuis longtemps débogage des applications Blazor WebAssembly directement dans Visual Studio et Visual Studio Code! Cela signifie que nous pouvons désormais F5 nos applications Blazor – juste F5 et rien d'autre!

Comme toujours, l'interface utilisateur de Telerik pour les versions Blazor va de pair avec les versions d'aperçu publiées par Microsoft. Nous sommes heureux d'annoncer que la dernière version de Telerik UI for Blazor 2.10.0 est compatible avec la dernière version preview 3 de Blazor WebAssembly 3.2.0 .

Y aura-t-il d'autres versions d'aperçu de Blazor WebAssembly avant la sortie officielle en mai? La réponse est oui, car Microsoft a annoncé qu'en avril, il y aura la prévisualisation 4, la prévisualisation 5 et la version Release Candidate de Blazor WebAssembly. Restez à l'écoute pour des annonces plus excitantes pour le cadre Blazor et l'interface utilisateur Telerik pour Blazor!

Composant Blazor ListView

Présentation du composant Blazor ListView

Le nouveau composant ListView vous permet d'afficher les éléments d'une source de données dans une liste de modèles entièrement personnalisable. Que vous cherchiez des moyens de visualiser une simple liste d'articles ou un catalogue de produits plus sophistiqué dans vos applications Blazor, le composant ListView offre tout ce dont vous avez besoin!

Interface utilisateur Telerik pour Blazor ListView avec modèles et pagination

L'utilisation du composant ListView dans les applications Blazor prend quelques mesures:

1. Ajoutez le TelerikListView tag
2. Remplissez sa propriété Data avec la collection d'éléments que vous souhaitez afficher
3. Définissez le modèle pour les éléments et ajoutez les styles appropriés à votre application Blazor

 < TelerikListView   Data  =  "@ ListViewData" >  
      <[[19659022] Modèle >   
    [1 9459037]  < div >   
      < h4 > @ context. Nom </  h4 >   
      < h5 > @ context.Team </  h5 >   
      </  div >   [19659002]      </  Modèle >   
   </  TelerikListView  > 

Pagination Blazor ListView

De plus, vous pouvez activer la pagination et définir des dimensions pour ListView.

 < TelerikListView   Données  =  "@ ListViewData"   Largeur  =  "700px"   Pageable  =  "true"   PageSize  =  "15" [1 9659024]> 

Pour activer la pagination ListView définissez le paramètre Pageable du composant sur true et le paramètre PageSize (nombre d'éléments rendus) sur un nombre particulier (par défaut, 10).

Personnalisation de Blazor ListView à l'aide de modèles

Le modèle est le bloc de construction principal du composant ListView. Pour chaque élément du contrôle, vous définissez la disposition via son modèle et vous pouvez utiliser le contexte qui est le modèle de la source de données afin d'obtenir les informations pour l'élément.

Interface utilisateur Telerik pour Blazor ListView Component

Vous pouvez entièrement personnaliser entièrement l'apparence ListView à travers les différents modèles qu'il propose:

• Template – définit comment tous les éléments sont affichés (obligatoire)
• Modifier le modèle – le rendu d'un élément en mode édition ou insertion (voir la section de blog suivante)
• Modèle d'en-tête – votre propre contenu au-dessus du liste d'éléments
• Modèle de pied de page – votre propre contenu après la liste d'éléments et avant le pager

Édition de Blazor ListView

Le composant ListView peut facilement gérer les données créer , mise à jour et suppression (CUD) des opérations dans

Telerik UI for Blazor ListView Editing

Pour appeler les commandes, utilisez le Composant ListViewCommandButton et choisissez parmi les valeurs de commande intégrées suivantes: Ajouter, Modifier, Enregistrer, Supprimer, Annuler.

Les boutons de commande présentent les fonctionnalités standard des boutons telles que les icônes, le texte, l'état principal et un gestionnaire d'événements OnClick que vous pouvez utiliser pour implémenter des commandes personnalisées, bien que vous puissiez utiliser n'importe quel bouton ou gestionnaire d'événements DOM pour cela.

Blazor Événements ListView

Le composant ListView expose plusieurs événements pour vous permettre de gérer les données dans les applications Blazor. Voici un résumé des événements disponibles et de leurs déclencheurs:

• OnRead – se déclenche lorsque les données sont récupérées
• OnUpdate – se déclenche lorsqu'un élément existant est enregistré
• OnEdit – se déclenche lorsque l'utilisateur clique sur la commande Modifier
• OnCreate – se déclenche lorsqu'un nouvel élément est enregistré
• OnDelete – se déclenche lorsqu'un élément est supprimé
• OnCancel – se déclenche lorsque le bouton Annuler est cliqué
• PageChanged – se déclenche lorsque les pages utilisateur via ListView

Opérations personnalisées Blazor ListView

Le composant ListView fournit des options pour implémenter vos opérations de source de données personnalisées. Ajoutez simplement un bouton (ou un autre composant d'interface utilisateur) et appelez l'action correspondante – qu'il s'agisse de calcul, de chargement de données à la demande ou de toute autre mise à jour de la source de données. Consultez les exemples de filtrage Blazor ListView et de tri .

Composant Blazor Pager

Présentation du composant Pager

L'interface utilisateur Telerik pour Blazor Pager est une interface utilisateur autonome composant qui vous donne la possibilité de diviser le contenu et de le visualiser magnifiquement en pages.

Interface utilisateur Telerik pour composant Blazor Pager

Pour ajouter de la pagination à vos applications Blazor, vous devez ajouter le TelerikPager , définissez le paramètre Total sur le nombre d'éléments dans la source de données et PageSize le nombre d'éléments à présenter sur une page. Utilisation des valeurs de PageSize et Paramètres de la page vous pouvez extraire et restituer le sous-ensemble de données souhaité.

 < TelerikPager   Total  =  "@ Games.Count"   PageSize  =  "@ PageSize"   @  bind-Page  =  "@ Page" > </  TelerikPager > 

En outre, vous pouvez définir le nombre maximal de boutons de page visibles à l'aide du ButtonCount . Pour prendre effet, le ButtonCount doit être inférieur au nombre de pages (ButtonCount <

Liaison bidirectionnelle du composant Pager

Vous pouvez utiliser la liaison bidirectionnelle pour le paramètre Page afin qu'il puisse répondre aux modifications apportées par un autre élément, ainsi que pour mettre à jour d'autres

Ci-dessous, vous pouvez voir un exemple du comportement du composant Pager lorsque la page est sélectionnée à partir d'une entrée externe.

 < div   class  =  "mb-3 ">  
      < label   classe  = " text-info " >   
      Sélectionnez une page:   
      < TelerikNumericTextBox   @  bind-Value  =  "@ Page"   />   
      </  étiquette >   [19659002]   </  div >  
   < TelerikPager   Total  =  "30" [19659023] PageSize  =  "@ PageSize"   @  bind-Page  =  "@ Page"   />  
    @code { 
      public int PageSize {get; ensemble; } = 3;   
      public int Page {get; ensemble; } = 1;   
  } 

Telerik Pager avec entrée extérieure

Pager Load Data on Demand

Pour les cas où vous ne souhaitez pas charger toutes les données en même temps, vous pouvez utiliser le Événement PageChanged du composant Pager. L'événement PageChanged se déclenche lorsqu'une nouvelle page est sélectionnée, et il vous permet d'extraire un nouveau sous-ensemble de données pour chaque page, lorsque les utilisateurs parcourent le contenu. Consultez un exemple

Intégration du composant Pager

Nous utilisons le composant Pager dans nos propres composants Blazor de la suite Telerik (comme le Grid et le ListView nouvellement publié), et maintenant vous pouvez également l'utiliser avec vos données et modèles!

Localisation intégrée du composant Pager

Le composant Pager possède l intégré prise en charge de l'ocalisation qui facilite la traduction des textes dans n'importe quelle langue requise par votre application Blazor.

Navigation et accessibilité du clavier intégré au composant Pager

Comme tous les autres composants Telerik UI pour Blazor, le composant Pager prend en charge la navigation au clavier et la mise en œuvre des normes d'accessibilité Web. Cela permet une navigation facile à travers les pages en utilisant simplement le clavier, ainsi qu'un accès au contenu des composants grâce aux technologies d'assistance.

Composant Blazor Checkbox

Présentation du composant Blazor Checkbox

Le nouveau composant Checkbox vous permet d'ajouter des cases à cocher stylisées et personnalisées à vos applications Blazor.

Interface utilisateur Telerik pour composant de case à cocher Blazor

Pour ajouter un composant Checkbox à votre application Blazor ajoutez la balise TelerikCheckbox et associez-la à une valeur. Ajoutez une étiquette avec une légende pour la case à cocher et vous êtes prêt à commencer!

 < TelerikCheckBox   Id [1965902424] =  "myCheckbox"   @  bind-Value  =  "@ isChecked"   />  
   < label   for  =  "myCheckbox" > @ (isSelected? "Checked": "Not Checked") </  label > 

 @code  
     {  

      bool privé isChecked {get; set;}   
  } 

Le T Le composant elerik Checkbox fournit les états basiques cochés et non cochés, ainsi qu'un troisième état - Indéterminé (quelque chose entre les deux - ni coché, ni coché). Vous pouvez utiliser l'état indéterminé pour les cases à cocher de niveau supérieur «Tout cocher» / «Tout sélectionner» qui incluent des sous-options avec des états différents, ou lorsque vous devez présenter une troisième option «non définie» telle que Oui / Non / Peut-être. [19659004] Besoin de sortir de l'ordinaire et d'ajouter une checkbox fantaisie à votre application Blazor? Vous pouvez ajouter un style personnalisé, des icônes et modifier la coche par défaut - consultez l'article dédié KB .

Checkbox ValueChanged et OnChange Events

Le composant Telerik Blazor Checkbox expose trois événements:

• ValueChanged - se déclenche chaque fois que le paramètre Value change. L'événement est un EventCallback et il peut être synchrone (retourner vide), ou il peut également être asynchrone et renvoyer une tâche asynchrone.
• OnChange - se déclenche chaque fois que le paramètre Value change . La principale différence avec ValueChanged est qu'OnChange n'empêche pas la liaison de données bidirectionnelle (à l'aide de la syntaxe @ bind-Value).
• IndeterminateChanged - se déclenche chaque fois que le paramètre Indeterminate change (cela se produit lorsque la case à cocher était indéterminée et que l'utilisateur clique dessus pour la basculer vers un état coché / décoché)

Nouvelles fonctionnalités de la grille de données

Colonnes gelées de la grille Blazor

Avec l'interface utilisateur Telerik pour Blazor 2.10.0 nous continuons de nous concentrer sur l'expansion du composant Data Grid et avons implémenté Frozen Columns (demandé et voté via le UI for Blazor Feedback portal ).

La nouvelle fonctionnalité permettra aux utilisateurs de corriger les colonnes importantes de la grille et de les rendre visibles lors du défilement horizontal.

Telerik Colonnes gelées de la grille Blazor

Pour activer le gel des colonnes de la grille dans vos applications Blazor il vous suffit de définir le paramètre de la colonne de la grille Verrouillé sur true.

Dans l'exemple ci-dessous est montré comment geler les première et dernière colonnes de la grille de données Blazor, mais si nécessaire, vous pouvez également geler les colonnes au milieu de la grille.

 < TelerikGrid   Data  =  ] "@ GridData"   Largeur  =  "850px"   Hauteur  =  "400px" >  
       < GridColumns >   

      <
    
 22] GridColumn   Field = @ nameof (Product.ProductName)  Title  =  "Product Name"   Width  =  "150px"   Locked  ] =  "true"   />   

      < GridColumn   Champ = @ nameof ( Product.UnitPrice)  Titre  =  "Prix unitaire"   Largeur  =  "150px"   />   
      < GridColumn   Field = @ nameof (Product.UnitsInStock)  Title  =  "Unités en stock"   Largeur [19659024] =  "150px"   />   
      < GridColumn   Champ = @ nameof (Product.CreatedAt)  Titre  =  "Date de création"   Largeur  =  "250px"   />   
      < GridColumn   Field = @ nameof (Product.Discontinued)  Title  =  "Discontinued" [19659023] Largeur  =  "150px"   />   
      < GridCommandColumn   Largeur  =  "250px"   Verrouillé  =  "vrai" >   
      < GridCommandButton   Command  =  "CustomCommand"    Icon  =  "information"   
  [1945903535]    OnClick = "@ ((GridCommandEventArgs e) => Résultat = $" cliquez sur {(e.Item as Product) .ProductName} ")">   [19659002]      Information  [1 9459004] 
      </  GridCommandButton >   
     ]  </  GridCommandColumn >   
      </  GridColumns >   
   </  TelerikGrid > 

Blazor Grid Sélection de plusieurs lignes

Pour donner une flexibilité supplémentaire lors de la sélection de plusieurs lignes de données via une colonne Checkbox dans la grille, nous avons ajouté un nouveau paramètre SelectAllMode . Vous pouvez maintenant configurer si toutes les données de la grille doivent être sélectionnées ou uniquement les lignes actuellement chargées dans la grille. Le paramètre SelectAllMode accepte deux valeurs:

• Actuel - sélectionne les lignes de données actuellement visibles (qui inclut les données paginées, les données filtrées ou les données partiellement chargées à l'aide de la virtualisation)
• Tout - sélectionne toutes les lignes de données chargées

Voici un exemple de comment utiliser le paramètre SelectAllMode dans la grille:

 Initier l'insertion ou la modification des éléments de la grille à partir du code
 Nous avons introduit  Blazor Grid State dans notre précédent  publication de blog et dans cette édition examinons comment lancer l'insertion ou la modification des éléments de la grille via votre propre code, sans obliger les utilisateurs à cliquer sur les boutons de commande.
 L'enregistrement de l'état de la grille vous permet de stocker les éléments actuellement modifiés par les utilisateurs - à la fois leur version d'origine du modèle qui est en cours de modification et celui nouvellement inséré. Pour les cas où vous souhaitez enregistrer les valeurs modifiées à chaque frappe, vous pouvez utiliser un modèle d'éditeur personnalisé et mettre à jour les champs  EditItem  /  InsertedItem  de l'objet d'état, puis enregistrer l'état dans votre un service.
 De plus, vous pouvez utiliser les champs d'état:  EditItem  OriginalEditItem  et  InsertItem  pour mettre la grille en mode édition / insertion via votre propre code d'application, au lieu de demander à l'utilisateur de l'initier via un bouton de commande  .
 Consultez l'article de documentation officielle avec un exemple sur  comment lancer l'insertion / modification d'éléments à partir du code  dans l'interface utilisateur Telerik pour Blazor Grid.
 Blazor Free E-Book
 Entre les versions 2.9.0 et 2.10.0, notre collègue Ed Charbeneau, MVP et gourou de Blazor a emballé un excellent Blazor des sujets et des tonnes d'exemples de code dans son nouveau livre " Blazor, A Beginner Guide ".   Le livre est téléchargeable gratuitement, dédié à la communauté .NET et vise à vous rendre productif avec Blazor en aucun
   Get Blazor: A Beginner's Guide 
 Télécharger Telerik UI for Blazor 2.  10  .0
 Dirigez-vous vers  le Telerik Page UI for Blazor  et téléchargez la version 2.10.0 de Telerik UI for Blazor Native Components. Continuez à nous dire ce qui fonctionne bien, ce qui doit changer et ce que vous aimeriez voir ensuite dans la section dédiée  Portail de commentaires Blazor  ou dans la section des commentaires ci-dessous!
   Essayez la dernière version de l'interface utilisateur Telerik pour Blazor 
 Merci!
 Merci d'avoir participé et nous aidant à grandir et à rendre Telerik UI pour Blazor plus grand et meilleur.