Telerik UI Blazor 2.22.0 – Composants de formulaire et de validation

Découvrez tout ce qui est nouveau dans la dernière version de Telerik UI pour Blazor. Du nouveau composant Form à la validation améliorée et plus encore, nous visons à vous aider à développer des applications Blazor étonnantes!

Hey Blazor et Telerik UI pour Blazor Folks, le composant natif de Blazor Form est là et nous sommes super ravi de partager avec vous les nouvelles mises à jour qui font partie de Telerik UI pour la version Blazor 2.22.0! Trois Composants de validation Grille édition et navigation de type Excel Améliorations de TreeList Fenêtre déplaçable fonctionnalités supplémentaires dans nos contrôles basés sur les entrées et bien plus encore!

Lisez à l'avance pour en savoir plus sur la version complète de Telerik UI for Blazor 2.22.0 release components and features that you can plug and play in your Blazor Server and WebAssembly apps.

New Composant Blazor Form

Présentation du composant Form

Avec le nouveau composant Telerik Form pour Blazor la génération et la gestion des formulaires sont simples grâce aux multiples fonctionnalités intégrées, aux divers paramètres et aux événements exposés. Vous pouvez facilement utiliser la génération automatique de champs ou créer votre propre mise en page spécifique à l'application Blazor. Utilisez les éditeurs personnalisés organisez-les en groupes et colonnes appliquez la validation définissez l'orientation du formulaire et plus !

ou EditContext .

Pour utiliser le composant Form avec un modèle ajoutez simplement la balise et fournissez un objet au paramètre Model du composant. Pour activer la validation du formulaire, vous devez y ajouter la balise et fournir un validateur, par exemple le DataAnnotationsValidator qui vient avec le framework Blazor. Le formulaire fonctionne également avec tout validateur (y compris un tiers) qui est compatible avec EditForm et EditContext tels que ObjectGraphDataAnnotationsValidator et FluentValidation .

Pour utiliser le composant Form avec un EditContext vous devez ajouter la balise et fournir un objet de type EditContext au paramètre EditContext du formulaire. Pour appliquer la validation, vous pouvez utiliser soit la balise soit les méthodes d'extensions de EditContext. Cela vous permet d'utiliser une logique métier plus complexe qui utilise les fonctionnalités EditContext.

Formulaire Génération automatique de champs

Le formulaire Telerik Blazor peut générer des éditeurs basés sur les champs de modèle (à la fois à partir d'un Model et EditContext).

Le Les types de données suivants sont pris en charge par défaut et utilisent les éditeurs par défaut suivants:

• string → Telerik TextBox
• int, double, float, decimal → Telerik NumericTextBox
• Enum → Telerik DropDownList
• DateTime → Telerik DatePicker
• bool → Telerik CheckBox

Eléments de composant de formulaire

En plus des éditeurs par défaut du composant Form, vous pouvez également utiliser les éditeurs personnalisés définis via le FormItem . Pour utiliser des éditeurs personnalisés, vous spécifiez leur collection dans la balise FormItems (un enfant de la balise TelerikForm).

La simplicité de la personnalisation des éditeurs est fournie par les multiples paramètres exposés par le Balise FormItem: LabelText, Id, Hint , Champ, Type de champ, Classe, Modèle et plus encore!

Telerik UI for Blazor Form Grouping

Orientation du composant de formulaire

Le composant Form peut prendre une orientation verticale (par défaut) et horizontale . Définition de l'orientation du formulaire sur horizonal placera les étiquettes sur le côté gauche des éditeurs.

OnSubmit – se déclenche lorsque l'utilisateur clique sur le bouton Soumettre dans le formulaire et peut être utilisé pour déclencher manuellement la validation de EditContext et appliquer la logique personnalisée

OnValidSubmit – se déclenche lorsque le formulaire est soumis et qu'il n'y a pas d'erreurs de validation

OnInvalidSubmit – se déclenche lorsqu'il y a des erreurs de validation dans le formulaire lors de sa soumission

Trois nouveaux composants de validation

Pour faciliter le style et la personnalisation des messages de validation dans votre application Blazor nous avons fourni trois options: TelerikValidationMessage TelerikValidationTooltip et TelerikValidationSummary .

Ces composants ajoutent des options de personnalisation et de localisation en plus des ValidationSummary et ValidationMessage standard fournis par le framework Blazor. Les trois composants de validation Telerik peuvent être utilisés avec le formulaire Telerik ou avec tout formulaire qui fournit un EditContext .

Passons en revue les composants de validation Telerik, les fonctionnalités et les cas d'utilisation pour chacun d'eux.

TelerikValidationMessage

Le Telerik Validation Message for Blazor est applicable par champ de formulaire et étend le standard ValidationMessage fourni par le framework. Le TelerikValidationMessage inclut des fonctionnalités intégrées pour:

• Modèles – ceux-ci vous permettent de contrôler et d'afficher du contenu personnalisé avec les messages de validation de formulaire
• Classe – cela vous permet d'ajouter une classe CSS personnalisée à l'étendue, qui encapsule le message de validation

Telerik Validation Tooltip . Il rend le message de validation sous forme d'info-bulle lorsque les utilisateurs survolent l'éditeur et apparaît comme une fenêtre contextuelle plutôt qu'un élément en ligne. [19659003] Le TelerikValidationTooltip est livré avec des options pour l'adapter comme vous le souhaitez en définissant sa:

• Position – le paramètre Position prend un membre de l'énumération TooltipPosition: Top (par défaut), Bott om, Right, Left
• Template – vous permet d'afficher du contenu personnalisé dans l'infobulle de validation
• Class – en utilisant le paramètre Class, vous pouvez ajouter une classe CSS personnalisée à la validation tooltip

Telerik Validation Summary for Blazor est construit au-dessus du standard ValidationSummary fourni par le framework et vous permet de personnaliser le résumé de toutes les erreurs de validation via Templates and Class Parameter .

Blazor Grid InCell pour permettre une navigation et une édition fluides à travers le clavier ressemblant à l'expérience de la gestion des données dans des feuilles de calcul Excel.

En utilisant l'onglet les utilisateurs clés peuvent passer d'un éditeur de grille au suivant sur la même ligne – respectivement, avec Shift + Tab ils peut accéder à la cellule précédente. L'utilisation de Enter activera le «mode d'édition» pour une cellule focalisée ou validera les changements et ouvrira la ligne suivante dans la même colonne pour l'édition. Lorsqu'une cellule est ouverte pour modification, elle concentrera tout son contenu (à la fois avec le clavier et avec un clic de souris) afin que vous puissiez commencer à taper immédiatement.

Interface utilisateur Telerik pour l'édition de type Excel Blazor Grid

Les modifications de cellule de grille peuvent être validées de trois manières:

• Utilisation de Entrée pour valider les modifications apportées à la ligne actuelle et ouvrir la cellule sous la dernière cellule modifiée pour la modifier (utile lors de la modification de toutes les lignes, en se concentrant sur une seule colonne, toujours à la manière d'Excel)
• Utilisation de l'onglet et en naviguant jusqu'à la fin de la ligne actuelle, le focus se déplace vers la première cellule de la ligne suivante
• Naviguer à l'extérieur / cliquer en dehors de la ligne de grille actuelle

Sélection de la case à cocher des lignes de la grille uniquement

Vous pouvez faire le Sélection des lignes de la grille uniquement dans le cas où les utilisateurs ont coché une colonne de case à cocher dédiée [1 9459009]. Ceci peut facilement être réalisé en définissant sur true le nouveau paramètre CheckBoxOnlySelection de GridCheckboxColumn . Lorsque cette propriété est définie sur true, cliquer ailleurs sur la ligne avec la souris n'aura pas d'effet de sélection, vous pouvez donc la réserver pour l'édition ou d'autres actions de l'utilisateur.

Grille avec un modèle de sélecteur de menu de colonne qui vous permet de réorganiser et de personnaliser la liste de colonnes.

en permettra une mise en forme cohérente lors du passage en mode d'édition.

Colonnes gelées avec virtualisation de colonnes

Avec cette version, nous permettons l'intégration de deux fonctionnalités Grid populaires: les colonnes figées / verrouillées et virtualisation de colonne . Cela permettra aux utilisateurs de garder les colonnes importantes visibles tout en faisant défiler de manière transparente de grands volumes de données Grid qui utilisent la virtualisation de colonnes.

Améliorations de la fenêtre Blazor

Fenêtre déplaçable

Le composant Telerik Blazor Window est maintenant amélioré avec une fonctionnalité déplaçable. Vous pouvez déplacer la fenêtre à travers sa barre de titre, ce qui vous permet de réorganiser facilement l'écran de la manière la mieux adaptée à vos besoins. Déplacer la fenêtre est activé par défaut et vous pouvez l'arrêter en définissant le paramètre Draggable du composant Window sur false.

Si vous utilisez les valeurs «Gauche» et «Haut» pour fournir une position initiale à une fenêtre déplaçable, vous devez maintenant vous assurer de les @ lier, afin qu'ils puissent se mettre à jour.

TreeList component est une autre donnée très utilisée dans les applications Blazor, nous essayons donc de lui donner un peu d'amour avec presque toutes les versions.

Navigation et édition de type Excel dans TreeList

Les utilisateurs travaillant avec des données hiérarchiques dans TreeList peuvent désormais bénéficier de de type Excel édition et navigation . En conservant la même logique que dans Telerik Grid, les utilisateurs peuvent naviguer dans les données en mode d'édition InCell avec Tab (ou Shift + Tab ) et passez en mode édition avec la touche Entrez .

TreeL ist Sélection de case à cocher uniquement

Il est désormais possible de configurer votre TreeList pour la sélection de ligne uniquement via une colonne de case à cocher de liste d'arbres dédiée . Ceci peut être facilement réalisé en définissant sur true le nouveau paramètre CheckBoxOnlySelection du TreeListCheckboxColumn .

TreeList TelerikCheckbox comme éditeur booléen par défaut

Avec la version actuelle, le composant TelerikCheckbox sera remplace l'éditeur booléen par défaut dans le composant Telerik Grid, permettant des styles cohérents lors de l'édition des données.

Téléchargez Telerik UI pour Blazor 2.22.0

Nous vous encourageons à essayer la dernière et la meilleure de Telerik UI pour Blazor et dites-nous ce que vous en pensez!

• Pour tous les nouveaux utilisateurs de Telerik UI pour Blazor, vous pouvez télécharger une version d'évaluation gratuite de Telerik UI pour Blazor 2.22.0 à partir de la page Telerik UI pour Blazor
• Les titulaires de licence active Telerik peuvent récupérer la dernière version sur la page «Votre compte» ou mettre à jour directement la référence du package Telerik.UI.for.Blazor NuGet vers la version 2.22.0 dans les solutions Blazor existantes

Merci!

Comme toujours, merci de la part de l'interface utilisateur Telerik pour l'équipe Blazor de Progress. Veuillez nous laisser vos commentaires sur notre portail dédié aux commentaires de Blazor ou dans la section des commentaires ci-dessous!