Nouveaux composants et fonctionnalités dans Telerik UI pour Blazor 2.15.0

La dernière version de Telerik UI pour Blazor propose de nouveaux composants natifs dans ButtonGroup et ToggleButton, des mises à jour de Grid, Chart, Treeview et More. Lisez la suite pour tous les faits saillants.

Nous sommes en juin et voici une autre version de Telerik UI for Blazor qui apporte deux nouveaux composants Blazor natifs— Button Group et Toggle Bouton – plusieurs nouvelles fonctionnalités de la grille Graphique TreeView Zone de texte et plus encore. Plongeons-nous dans la nouvelle version 2.15.0 et voyons en détail les nouveaux avantages, y compris le nouveau Grid Custom Filtering Grid Row-Click Events la prise en charge du ExpandoObject dynamique , et la liaison à DataTable tous prêts à être connectés et lus dans vos applications Blazor Server et WebAssembly!

Nouveaux composants Blazor

Composant Blazor Button Group

Présentation de ButtonGroup

Le ButtonGroup est un conteneur d'interface utilisateur pour les boutons, qui vous permet de sélectionner des instances de bouton unique ou multiple, et de répondre aux événements de sélection et de clic. Les boutons du ButtonGroup remplissent le conteneur, correspondent au style en fonction du thème choisi et fournissent les fonctionnalités communes des boutons comme les images et les icônes, ainsi que d'autres paramètres et attributs.

Interface utilisateur Telerik pour composant Blazor ButtonGroup

Pour utiliser le composant ButtonGroup dans vos applications Blazor, vous devez ajouter la balise TelerikButtonGroup et, à l'intérieur, ajouter le balises ou correspondantes qui désignent chaque bouton, comme illustré dans l'exemple ci-dessous:

  
 
     
       Premier bouton    
       Deuxième bouton    
      
  

ButtonGroup Selection

En utilisant le paramètre SelectionMode du composant ButtonGroup, vous pouvez activer la sélection unique ou multiple de ses instances ButtonGroupToggleButton.

ButtonGroup Customization and Styling

Vous pouvez personnaliser et styliser le ButtonGroup et ses boutons individuels en utilisant différents styles, images, sprites, icônes de police et mise en forme conditionnelle. Découvrez un exemple de transformation complète de l'apparence d'un groupe de boutons.

Événements ButtonGroup

Les boutons du composant ButtonGroup fournissent deux événements de bouton / bascule pratiques:

• OnClick se déclenche lorsque l'utilisateur clique ou appuie sur le bouton. Vous pouvez l'utiliser pour appeler une logique asynchrone telle que la récupération de données ou l'appel d'un service.
• SelectedChanged se déclenche lorsque l'utilisateur modifie l'état du bouton en cliquant dessus (ou en utilisant Espace ou Entrée). Vous pouvez l'utiliser pour appeler la logique locale du modèle de vue (applicable pour un ButtonGroupToggleButton)

Navigation clavier ButtonGroup

Le composant ButtonGroup a une navigation clavier intégrée permettant aux utilisateurs finaux de naviguer facilement dans les applications Blazor, de se concentrer et de cliquer sur les boutons à l'aide de leur clavier.

Blazor Toggle Button

ToggleButton Overview

Le ToggleButton vous permet d'effectuer des actions de bascule (telles que l'activation / désactivation) sur les deux états du composant.

Interface utilisateur Telerik pour Blazor ToggleButton Component

Pour ajouter une interface utilisateur Telerik pour Blazor ToggleButton à votre application Blazor, utilisez la tag.

 <TelerikToggleButton @ bind-Selected =  "@ IsSelected" >  
      Sélectionné: @IsSelected   
      

   @code { 
      bool   IsSelected { get ;  set ; }   
     } 

ToggleButton Styling

Vous pouvez utiliser une image, une image-objet ou une icône de police dans le bouton bascule pour que vous personnalisez son apparence et permettez aux utilisateurs d'interpréter plus facilement son objectif.

Événements ToggleButton

Le composant ToggleButton expose les événements suivants pour vous permettre de gérer les clics et la sélection dans les applications Blazor.

• OnClick se déclenche lorsque l'utilisateur clique ou appuie sur le bouton. Vous pouvez l'utiliser pour appeler une logique asynchrone telle que la récupération de données ou l'appel d'un service
• SelectedChanged se déclenche lorsque l'utilisateur modifie l'état du bouton en cliquant dessus (ou en utilisant Espace ou Entrée). Vous pouvez l'utiliser pour appeler la logique locale du modèle de vue

Navigation par clavier ToggleButton

Comme la plupart des composants de l'interface utilisateur Telerik pour Blazor, le ToggleButton possède une navigation par clavier intégrée permettant aux utilisateurs finaux de se concentrer et de cliquer facilement sur les boutons à l'aide de leur clavier.

Améliorations des composants Blazor

Avec chaque nouvelle version que nous livrons avec Telerik UI pour Blazor, nous visons à donner notre amour au composant Grid et dans la version 2.15, nous avons ajouté plusieurs fonctionnalités demandées via notre portail de rétroaction .

Blazor Grid Component New Features

Grid Custom Filter

Lorsque vous travaillez avec des données, une chose est sûre: elle grandit et les utilisateurs doivent pouvoir trouver rapidement leurs informations pertinentes. enregistrements. Et parce que les filtres ne viennent pas toujours dans leur forme simple, tels que les enregistrements me montrer des données plus petites que DateTime. Maintenant, dans cette version, nous avons ajouté la flexibilité pour vous permettre de personnaliser le filtrage des données. Opérandes "title =" Telerik UI pour le filtrage personnalisé de Blazor Grid – Opérandes multiples "/>

Telerik UI pour Blazor Grid Menu de filtre personnalisé – Appliquer plusieurs opérandes

Vous pouvez appliquer autant d'opérandes logiques que nécessaire et implémenter tout filtrage personnalisé

Interface utilisateur Telerik pour le menu de filtre personnalisé de la grille Blazor — Appliquer plusieurs cases à cocher avec le modèle de menu de filtre

En plus du menu de filtre personnalisé de la grille, vous pouvez également implémenter un filtrage personnalisé sur les lignes de la grille à l'aide du modèle de cellule de filtre. Interface utilisateur de Telerik pour la ligne de filtre personnalisé de la grille Blazor "title =" Interface utilisateur de Telerik pour la ligne de filtre personnalisé de la grille Blazor "/>

Interface utilisateur de Telerik pour la grille Blazor — Filtre de ligne personnalisé

Exemples de code pour personnaliser le filtrage à l'aide de la et des modèles peuvent être trouvés sur nos démos de filtrage personnalisées dédiées pour les lignes de menu et .

Événements de clic de ligne de grille

Nous avons exposé deux nouveaux événements dans la grille , afin que vous puissiez implémenter une logique métier personnalisée dans votre code qui gère les clics des utilisateurs sur les lignes de la grille.

OnRowClick et OnRowDoubleClick les événements se déclenchent lorsque l'utilisateur clique et double-clique sur une ligne de la grille , respectivement. Leurs gestionnaires d'événements reçoivent l'objet GridRowClickEventArgs fournissant le modèle de la ligne cliquée dans le champ Item ce qui vous permet d'afficher des détails, de charger des données à la demande, d'afficher des données associées et d'effectuer diverses personnalisations actions sur les lignes cliquées.

Prise en charge de la grille pour ExpandoObject

Ne disposez pas d'un modèle fortement typé de vos données. Pas de problème, l'interface utilisateur Telerik pour Blazor Grid peut facilement prendre en charge les types de données dynamiques. Consultez notre exemple de référentiel sur la façon de lier la grille à ExpandoObject dans les applications Blazor.

Lier la grille à DataTable

Pour ceux d'entre vous qui ont un backend renvoyant DataTable, vous pouvez maintenant lier la grille aux données DataTable et ont facilement toutes les fonctionnalités intégrées de Grid: tri, pagination, filtrage et même édition.

Découvrez un exemple de comment lier les applications Grid in Blazor à un DataTable . [19659050] Nouvelles fonctionnalités du composant Blazor TextBox

Paramètres supplémentaires de la zone de texte

Les dernières mises à jour du composant Textbox vous permettent de personnaliser facilement plusieurs éléments de la saisie de texte, tels que: saisie semi-automatique, espace réservé, nom, titre et TabIndex.

 <TelerikTextBox Name =  "email"   PlaceHolder =  "john@smith.com"   TabIndex =  "3"   InputMode =  "email"   Id =  "email"   AutoComplete =  "on"   Width =  "180px" > 

Mot de passe de la zone de texte

La zone de texte La boîte de texte Le composant a désormais un nouveau paramètre, Password, qui, lorsqu'il est défini sur true, vous donne la possibilité de masquer les caractères dans l'entrée et de lui donner un aspect de mot de passe approprié.

Interface utilisateur Telerik pour la propriété de mot de passe Blazor Textbox

Nouvelles fonctionnalités du composant TreeView Blazor

Sélection de nœuds TreeView

La sélection de nœud TreeView peut être configuré en définissant le paramètre SelectionMode sur un membre de l'énumération TreeViewSelectionMode, qui prend l'une des trois options:

• N un – désactiver la sélection de nœuds (par défaut)
• Unique
• Multiple (à l'aide des touches Ctrl ou Maj)

Telerik Interface utilisateur pour la sélection de nœuds dans Blazor TreeView

Événements de clic sur les nœuds TreeView

Deux nouveaux événements ont été ajoutés au composant pour permettre une flexibilité lors de la sélection et de l'utilisation des nœuds TreeView:

• OnItemClick – incendies lorsque l'utilisateur clique (ou appuie sur Entrée) sur un nœud (élément) de TreeView.
• SelectedItemsChanged – l'événement SelectedItemsChanged se déclenche lorsque la sélection est activée et l'utilisateur clique sur un nouvel élément.

Composants du graphique Blazor Nouvelles fonctionnalités

Infobulles de graphique

Vous pouvez enrichir vos graphiques Blazor avec trois options d'infobulle graphiques prêtes à l'emploi pour les points de données:

1. Spécifique info-bulle pour chaque
2. info-bulle commune à toutes les séries de graphiques
3. Ou une info-bulle partagée qui fournit des informations résumées de tous les points de données de la catégorie survolée

Pour activer des info-bulles spécifiques pour les points de données de chaque série individuelle, vous devez inclure le < ChartSeriesTooltip > dans la balise < ChartSeries >, et définissez son paramètre Visible sur true.

Pour activer la même info-bulle pour toutes les séries de graphiques, ajoutez la balise à l'intérieur et définissez son paramètre Visible sur true.

Telerik UI for Blazor Chart Single Tooltip [19659009] Pour activer l'info-bulle partagée dans Telerik UI pour les graphiques Blazor, ajoutez la balise à l'intérieur de la balise et définissez ses paramètres Shared et Visible sur true.

Telerik UI for Blaz ou Infobulle partagée du graphique

L'interface utilisateur de Telerik UI pour le graphique Blazor permet une personnalisation complète de leur apparence: arrière-plan, couleur, etc. et du contenu qui est rendu dans l'info-bulle via des modèles / modèles partagés.

Le modèle d'infobulle du graphique et le modèle partagé vous permet de définir une logique métier personnalisée, de rendre le HTML et vous donne accès au paramètre de contexte . Dans le modèle, il fournit des informations sur le point de données actuel, telles que: CategoryIndex, SeriesIndex, SeriesName, DataItem, FormattedValue, et dans le SharedTemplate, il expose Category (rend le nom de la catégorie) et Points (une collection de données pour chaque série de données

Cliquez sur Événement sur un élément de graphique

Et pour rendre les choses plus interactives, l'interface utilisateur de Telerik pour Blazor Chart expose les événements qui vous permettent de gérer les clics des utilisateurs sur les séries de graphiques.

Consultez la Événement OnSeriesClick avec Telerik UI pour les cartes Blazor . ​​

Télécharger Telerik UI pour Blazor 2. 1 5.0

Pour voir en action tout ce qui est mentionné dans le blog de publication, rendez-vous sur la page Telerik UI pour Blazor téléchargez la version 2.15.0 de Telerik UI pour Blazor pour pimenter vos applications Blazor. Continuez à nous dire ce qui fonctionne bien, ce qui doit changer et ce que vous aimeriez voir ensuite dans le portail dédié de commentaires Blazor ou dans la section des commentaires ci-dessous!

Merci!

Comme toujours , toute l'équipe travaillant sur Telerik UI pour Blazor chez Progress vous remercie de votre implication et de nous avoir aidés à grandir et à rendre Telerik UI pour Blazor plus grand et meilleur.