Mises à jour du menu, du TimePicker et de la grille

Dans la dernière version de Telerik UI for Blazor, nous avons de nouveaux contrôles ainsi que des mises à niveau majeures de la grille, de la compatibilité avec Preview 8 et plus encore. Découvrez les nouveautés.

Avec la version 1.6.0 de l'interface utilisateur Telerik pour Blazor notre offre s'enrichit de deux nouvelles commandes dans les menus et . ] TimePicker ainsi que des améliorations majeures dans la grille! Dans cet article de blog, nous vous donnerons plus de détails sur les derniers ajouts à la famille de composants de l'interface utilisateur Telerik UI for Blazor et sur la façon de les utiliser pour améliorer votre application Blazor.

Nous avons également de bonnes nouvelles pour vous tous qui envisagez d'assister à un projet. des grandes conférences .NET de septembre – BASTA .

Nouveaux composants Blazor

Avec la version 1.6.0, nous introduisons deux nouveaux composants essentiels: Dites bonjour aux et . ] tags!

Nouveau composant Blazor: Menu

Les applications Blazor peuvent désormais avoir un menu élégant et une navigation intégrée sans effort. Ajoutez simplement la balise TelerikMenu et fournissez une collection de modèles à sa propriété Data.

Pour chaque élément de menu Blazor, vous pouvez contrôler la structure, l'apparence et le comportement, ainsi que le comportement à l'aide des champs suivants de la liaison de données: id ParentId HasChildren Items Texte Icon URL et l'événement OnSelected .

] Le composant Blazor Menu peut être lié aux données et afficher des informations plates ou hiérarchiques .

Telerik UI pour le menu Blazor (données plates)

Nous savons que les modèles de données peuvent avoir des propriétés qui ne correspondent pas au même nom que les champs trouvés dans les composants de l'interface utilisateur de Telerik pour Blazor. C'est pourquoi nous vous permettons de définir simplement les vôtres dans la configuration du composant de menu.Vous devez définir la relation entre les propriétés de l'élément de menu et le champ de modèle auquel le le menu est lié. Pour ce faire, utilisez les propriétés de la balise TelerikMenu principale comme dans l'exemple ci-dessous:

• IdField => Id
• ParentIdField => ParentId
• TextField => Text

 @using Telerik. Blazor.Components.Menu 
 <TelerikMenu Data = "@ MenuItems" 
 ParentIdField = "@ nameof (MenuItem.ParentId)" 
 IdField = "@ nameof (MenuItem.Id)" 
 TextField = " @nameof (MenuItem.Text) "> 
  
 Pour plus d'informations sur la liaison des données aux données hiérarchiques   dans la composante Menu, consultez les détails de notre documentation Blazor.
 
 Interface utilisateur Telerik pour le menu Blazor (Données hiérarchiques)
 Pour activer la navigation   dans le menu Telerik Blazor, vous disposez de deux options:
 approche vous pouvez utiliser la propriété intégrée  UrlField  pour renseigner les URL dans les ancres
 Pour une approche plus personnalisée et plus précise, vous pouvez utiliser un modèle    à générer les liens souhaités, ce qui vous permet de mieux contrôler l'apparence de chaque élément de menu
 Etant donné que les menus peuvent être utilisés dans différents scénarios et présentations, nous avons activé l'orientation horizontale et verticale pour s'adapter à tous les scénarios d'application.
 Interface utilisateur Telerik pour le menu Blazor (Orientation horizontale et verticale)
 Et parce qu'avec Menus, nous voulons toujours pouvoir  exécuter un code personnalisé  en cliquant sur un élément, dans le menu Telerik pour Blazor, nous avons exposé l'événement  OnClick . Lorsqu'un utilisateur clique / appuie sur un élément de menu, l'événement  OnClick  est déclenché et transmet l'élément de données sous-jacent en tant qu'argument. Selon votre cas d'utilisation, vous pouvez alors charger un contenu différent ou répondre à toute autre logique particulière.
 Nouveau composant Blazor: TimePicker
 Avec notre version  1.2.0 nous avons introduit le . Composant Blazor DatePicker et avec cette version, nous enrichissons la suite avec le contrôle des préférences de temps. Le composant  Blazor TimePicker  permet de sélectionner l'heure dans une liste visuelle dans un menu déroulant ou de la saisir dans une entrée de date   qui accepte uniquement les valeurs DateTime.
 
 Vous pouvez utiliser le format de date / heure standard:
 ou personnaliser le format en fonction des besoins de l'application:
 Plusieurs propriétés que vous pouvez configurer pour adapter l'utilisation du composant, telles que:  Min  Max  Valeur  et  Largeur . [19659011] Si vous devez gérer avec une logique spécifique les modifications apportées à l'entrée, telles que le trait de clavier, les boutons Définir ou Maintenant du menu déroulant, vous pouvez utiliser le  ValueChangedEvent .
 @ utilisant Telerik.Blazor.Components. TimePicker 
  du   dans le composant de la grille de Telerik Blazor: il suffit de définir la  propriété groupable .  "Vrai" . Cela permettra à vos utilisateurs de faire simplement glisser un ou plusieurs en-têtes de colonne vers le panneau de groupe et la grille visualisera les données groupées.
 
   
 Interface utilisateur Telerik pour le regroupement de la grille Blazor
 Pour supprimer un réglage de groupe, cliquez sur le bouton [x] sur son indicateur. Le panneau de groupe et les données correspondantes ne seront plus associés à ce groupe.
 Pour les scénarios plus complexes, vous pouvez également imbriquer des groupes et réorganiser les groupes sélectionnés dans la position souhaitée, le tout par un simple glisser d'un en-tête de colonne. 19659008] Sélection de lignes de grille
 Les lignes de grille prennent désormais en charge les options  de sélection simple et multiple  qui peuvent être configurées en définissant les  SelectionMode  sur  SelectionMode = "GridSelectionMode.Single"  ou  SelectionMode = "GridSelectionMode.Multiple"  (ou désactivez Sélection en définissant  SelectionMode = 'GridSelectionMode.None ")
 Pour suivre la sélection d'utilisateurs dans vos applications, vous pouvez utiliser . ] reliure à double sens  via l'événement  SelectedItems  ou  SelectedItemsChanged .
 
 La grille prend également en charge une option de  sélection de rangée  via un  Colonne de la case à cocher . Pour la définir, ajoutez une  colonne TelerikGridCheckbox  dans la  TelerikGridColumns  de la grille.
 @Utilisez Telerik.Blazor.Components.Grid 
 Data = @ GridData 
 SelectionMode = "GridSelectionMode.Multiple" 
 Pageable = "true" 
 PageSize = "10"> 
  
   
 
 
  
  
  
  
  
 
 En mode Sélection multiple, la sélection peut être effectuée à l'aide des approches suivantes :
 Cochez la case correspondant à chaque ligne souhaitée
 Appuyez sur la touche  Ctrl  et maintenez-la enfoncée, puis cliquez sur les lignes souhaitées
. Pour sélectionner une plage, utilisez la touche  Shift  et cliquez sur la rangée que vous souhaitez être le dernier de la gamme
 Compatibilité de l'Aperçu 8 –
 Dans la perspective de la version officielle d'ASP.NET Core 3.0 le mois prochain, notre objectif est de vous fournir en permanence des versions intermédiaires de nos composants Blazor. compatible avec chaque aperçu officiel de Microsoft.
 La semaine dernière, nous avons annoncé notre compatibilité totale avec les dernières modifications incluses dans  ASP.NET Core 3.0 Preview 8 .
 Rendez-vous à BASTA
 Pour ceux d'entre vous qui envisagent d'être à Mayence à Fin septembre, l'interface utilisateur de Telerik pour Blazor fera partie de la conférence  BASTA . Venez rencontrer notre équipe sur le stand de Progress Telerik   pour discuter de l'avenir de Blazor et participer à notre jeu «Code for Charity».
 Nous vous encourageons à assister au discours liminaire  engageant et provocateur  de notre responsable de l'ingénierie logicielle, Pavlina Hadzhieva:  Au revoir, JavaScript côté client – Bonjour Blazor .
 Découvrez l'interface utilisateur de Telerik pour Blazor 1.6.0
 Si vous êtes nouveau chez Blazor, visitez  la page de présentation de l'interface utilisateur de Telerik pour Blazor  et inscrivez-vous pour une expérience d'essai – rien de plus facile Cliquez sur! Ensuite, il suffit de suivre les documents de démonstration  de Blazor  et  de documentation .
  Commencez mon procès maintenant 
 Partagez vos réactions
 Nous encourageons tous nos efforts en ce sens. adoptants et fans de continuer à fournir de précieux commentaires! S'il manque des fonctionnalités ou des composants dont vous avez besoin, rendez-vous sur  le portail officiel d'informations de Telerik pour Blazor  et soumettez-nous vos idées.
 Codage Happy Blazor de l'équipe Telerik Blazor à Progress!