Nouveautés de Telerik UI pour ASP.NET Core R2 2020

Découvrez toutes les nouveautés de Telerik UI pour ASP.NET Core dans notre dernière version, y compris les nouveaux composants, les améliorations de Grid and Scheduler, les étiquettes flottantes et bien plus encore.

La version R2 2020 pour Telerik UI pour ASP. NET Core est arrivé! Découvrez les derniers ajouts à la suite de composants tels que Form, Stepper, TileLayout, Textbox et de nouvelles fonctionnalités comme le regroupement à distance côté serveur de la source de données Grid, la virtualisation du planificateur des groupes de ressources, les étiquettes flottantes pour les entrées, la compatibilité avec le dernier aperçu de .NET 5.0

Avec la deuxième version de l'année, nous sommes ravis de partager de tout nouveaux composants et fonctionnalités que vous pouvez connecter à vos projets et créer des applications modernes et attrayantes. Comme toujours, nous avons écouté vos commentaires et inclus dans la version de nombreux éléments et fonctionnalités les plus votés. Lisez à l'avance et découvrez les nouveautés de Interface utilisateur Telerik pour ASP.NET Core R2 2020 !

Compatibilité avec les versions d'aperçu .NET 5.0

Nous sommes heureux de partager cette interface utilisateur Telerik pour ASP.NET Core R2 La version 2020 est compatible avec .NET 5.0 preview 3 et nous visons à rester à jour avec toutes les mises à jour de Microsoft dans les versions d'aperçu de .NET 5.0 jusqu'à sa sortie officielle plus tard cette année en novembre.

Nouvelle interface utilisateur pour ASP.NET Core Components

Nouvelle interface utilisateur pour le composant de formulaire ASP.NET Core

Avec le nouveau composant de formulaire la création et la personnalisation de formulaires est une expérience fluide et agréable. Vous pouvez facilement obtenir l'apparence de formulaire souhaitée en utilisant des éditeurs par défaut ou personnalisés, en spécifiant la disposition et l'orientation, en affichant les éditeurs dans des groupes et des colonnes et en tirant parti de la validation intégrée.

Interface utilisateur Telerik pour ASP.NET Core Form Component

Un exemple de code sur la façon de générer l'exemple de formulaire affiché avec ses paramètres peut être vu ci-dessous:

 @ (Html.Kendo (). Form  ()   
    .Name (  "formExample" )    
    .HtmlAttributes ( nouveau   {action =  "Index" method =  "POST"  })    
    .Validatable (v =>    
    {   
    v.ValidateOnBlur ( true );    
    v.ValidationSummary (vs => vsEnable ( false ));    
   })    
    .Items (items =>    
    {[   
    items.AddGroup ()    
    .Label ([19659014] "Formulaire d'enregistrement" )    
    .Items (i =>    
    {   
    i.Add ()    
    .Field (f => f.UserName)    
    .Label (l = > l.Text ( "Username:" ));    
    i.Add ()    
    .Champ (f => f.Password)    
    .Label (l => l.Text ( "Password:" ))    
    .Hint ( "Astuce: entrez alphanumérique caractères uniquement. ");    
    i.Add ()    
    .Field (f => f.Email)    
 ]    .Label (l => l.Text ( "Email:" ));    
    ]  i.Add ()    

    .Field (f => f.DateOfBirth)     [19659003]    .Label (l => l.Text ( "Date de naissance:" ). Facultatif ( true ));    
    i.Add ()    
    .Champ (f => f. D'accord)    
    .Label (l => l.Text ( "" Accepter de Termes: "));    
   });    
   ] })    
    .Events (ev => ev.ValidateField ( "onFormValidateField" ). Submit (  "onFormSubmit" ). Clair ( "onFormClear" ))    
   ) 

Le Le composant de formulaire vous permet de personnaliser l'apparence et le comportement de ses éléments. Par défaut, le formulaire restitue les éditeurs par défaut en fonction du type de données fourni dans le modèle. Le formulaire vous permet de personnaliser les éditeurs de champ.

Dans l'image ci-dessous, vous pouvez voir comment le composant Form utilise divers autres UI Telerik pour les éditeurs ASP.NET Core.

Interface utilisateur Telerik pour ASP.NET Core Form avec éditeurs personnalisés

La Le composant de formulaire offre la disposition de la grille et deux modes d'orientation - horizontal ou vertical - qui vous permettent d'organiser les champs de formulaire dans le style requis et d'afficher le formulaire .

Une autre grande chose au sujet du composant Form est qu'il a une validation intégrée qui est déclenchée lors de la soumission du formulaire, mais peut également être configurée pour afficher une validation message lorsqu'un champ est ciblé par un utilisateur, puis flou sans définir sa valeur. Vous pouvez également activer un message récapitulatif de validation qui affiche une liste non ordonnée de toutes les erreurs de validation qui se sont produites dans les champs du formulaire. Et enfin, mais non des moindres , c'est le fait que vous pouvez personnaliser l'erro de validation message r utilisant la fonctionnalité de modèles.

Interface utilisateur Telerik pour ASP.NET Core Form Built-In Validation

Nouvelle interface utilisateur pour ASP.NET Core Tile Layout Component

Le nouveau TileLayout est un composant d'interface utilisateur de conteneur, qui permet aux utilisateurs finaux de réorganiser et de redimensionner le contenait des tuiles à l'intérieur afin de créer une disposition qui répond le mieux à leurs besoins.

Dans cet exemple de code, vous pouvez voir comment utiliser la balise HTML TileLayout pour générer la disposition illustrée dans l'image ci-dessous:

 @ (Html.Kendo (). TileLayout ()   
    .Name ( "tilelayout" )    
    .Columns (5)  ]   
    .RowsHeight ( "235px" )    
    .ColumnsWidth ( "300px" )    
    .Conteneurs (c => {   
    c.Add (). En-tête (h => h.Text ( "Pages vues" )). BodyTemplateId ( "vues -chart-template "). ColSpan (3) .RowSpan (1);    
    c.Add (). En-tête (h => h.Text ( "Taux de conversion" )). BodyTemplateId ( "taux de conversion "). ColSpan (1) .RowSpan (1);    
    c.Add (). En-tête (h => h. Texte ( "Actuellement" )). BodyTemplateId ( "actuel" ). ColSpan (1) .RowSpan (1);    
 
    c.Add (). En-tête (h => h.Text ( "Pages les plus visitées" )). BodyTemplateId ( "pages-chart-template" [19659015]). ColSpan (2) .RowSpan (1);    
    c.Add (). En-tête (h => h. Texte (  "Conversions par canal" )). BodyTemplateId ( "conversions-grid-template" ). ColSpan (2) .RowSpan (2);    
    c.Add (). En-tête (h => h.Text ( "Bounce Rate" )). BodyTemplateId ( "bounce-rate" ). ColSpan (1) .RowSpan (1);    
    c.Add (). En-tête (h => h.Text ( "Utilisateurs par canal") )). BodyTemplateId ( "users-grid-template" ). ColSpan (2) .RowSpan (2);    
    c.Add (). En-tête (h => h.Text ( "Visiteurs" )). BodyTemplateId ( "Visitors-chart-template" ). ColSpan ( 1) .RowSpan (2);    
    c.Add (). En-tête (h => h.Text ( "Conversion This Mois ")). BodyTemplateId (" conversion-chart-template "). ColSpan (2) .RowSpan (1);    
   })    
   . Réorganisable ( vrai )    
    .Resizable (  true )    
    .Events (e => e.Resize ( "onTileResize" ))    
   ) 

Interface utilisateur Telerik pour ASP.NET Core Tile Layout Component

En substance, le composant TileLayout est une surface de bac à sable bidimensionnelle basée sur une grille basée sur CSS Grid (avec toutes ses fonctionnalités) qui vous permet d'afficher du contenu dans des tuiles . Chaque tuile de conteneur a des dimensions, un en-tête et un contenu de corps configurables qui peuvent être du texte brut ou un modèle complexe contenant des composants.

Les utilisateurs peuvent redimensionner ses conteneurs en s'alignant sur les colonnes et unités de ligne disponibles et réorganiser la position des conteneurs de tuiles par glisser-déposer.

Telerik UI ASP.NET Core TileLayout Resizing

Nouvelle interface utilisateur pour ASP.NET Core Stepper Component

Le nouveau ASP.NET Core Stepper est un composant d'interface utilisateur riche en fonctionnalités qui guide les utilisateurs via une séquence d'étapes logiques et visualise la progression du processus. Le Stepper est parfaitement adapté pour guider les utilisateurs à travers des processus tels que l'enregistrement, l'application, l'achat, la réservation ou la configuration.


Telerik UI pour ASP.NET Core Stepper - Horizontal

Pour initialiser le Stepper, appelez-le simplement et donnez-lui un nom:

 @ (Html.Kendo (). Stepper ()   
    .Name ( "stepper" )    
    ) 

Vous pouvez configurer le nombre et le nom des étapes, marquez une étape comme sélectionnée ou ajoutez une icône à une étape comme indiqué dans l'exemple ci-dessous:

 @ (Html.Kendo (). Stepper ()   
    .Name ( "stepper" )    
    .Etapes (s =>    
    {   
    s.Add (). Label ( "First Step" );    
    s.Add (). Label ( "Second Step" ). Selected ( true  );    
    s.Add (). Label ( "Last Step" ). Icon ( "save ");    
   })    
    

En plus de cela, l'interface utilisateur pour ASP.NET Core Stepper fournit un ensemble de modes qui définissent la façon dont l'utilisateur interagira avec le Stepper. Vous pouvez configurer la séquence d'étapes logiques pas à pas (option de configuration linéaire) - si les utilisateurs doivent la suivre ou s'ils peuvent passer à n'importe quelle étape quelle que soit la séquence d'étapes.


Interface utilisateur Telerik pour ASP.NET Core Stepper - Vertical

Le composant Stepper a une orientation horizontale et verticale qui peut être définie via sa propriété Orientation et permet une personnalisation complète de ses étiquettes, indicateurs et étapes.

 @ (Html.Kendo (). Stepper ()   
    .Name ( "stepper" )    
   . Orientation (StepperOrientationType.Vertical)    
    .Label ( false )    
    .Indicateur ( vrai )    
  ) 

Comme tous les o En plus de l'interface utilisateur Telerik pour les composants ASP.NET Core, le Stepper a une navigation clavier, une accessibilité et une prise en charge de droite à gauche intégrées.


Interface utilisateur Telerik pour ASP.NET Core Stepper RTL

Nouvelle interface utilisateur pour ASP.NET Core Textbox Component

Avec le nouveau composant TextBox vous pouvez facilement convertir un élément dans vos applications ASP.NET Core dans une zone de texte de style.

La zone de texte fournit plusieurs options de configuration telles que la valeur, l'espace réservé, l'étiquette flottante, l'événement de modification (qui se déclenche chaque fois qu'une nouvelle valeur est définie par l'utilisateur) et est livré avec une accessibilité intégrée et une prise en charge de droite à gauche. [19659283] Interface utilisateur Telerik pour ASP.NET Core TextBox "title =" Interface utilisateur Telerik pour ASP.NET Core TextBox "/>

Interface utilisateur Telerik pour ASP.NET Core Textbox Component

Interface utilisateur pour les améliorations du composant ASP.NET Core

Regroupement de sources de données distantes

Avec le nouveau regroupement de sources de données distantes (côté serveur) vous pouvez considérablement augmenter les performances de la grille lors de la gestion de gros volumes de données dans votre application ASP.NET Core. La grille de données fonctionne de manière transparente avec des ensembles de données volumineux, car les enregistrements sont traités sur le serveur et les données de chaque groupe sont chargées uniquement lorsque l'utilisateur étend le groupe.

Interface utilisateur Telerik pour ASP.NET Core Data Source Grouping

Améliorations du planificateur

L'interface utilisateur Telerik pour ASP.NET Core Scheduler dispose de plusieurs nouvelles fonctionnalités permettant de personnaliser davantage le déjà composant puissant, et qui vous permettent de fournir une visualisation élégante des événements. Celles-ci incluent:

Virtualisation des groupes de ressources du planificateur

Si vous devez augmenter les performances de scénarios complexes impliquant plusieurs groupes de ressources et sous-groupes dans le composant Planificateur, la nouvelle fonctionnalité de virtualisation est faite pour vous.

Activation de la virtualisation des groupes de ressources, vous pouvez réduire jusqu'à cinq fois le temps de rendu et les utilisateurs peuvent faire défiler en douceur un planificateur chargé.

Consultez les exemples de planificateur de regroupement vertical des ressources avec et sans virtualisation avec deux groupes et trois sous-groupes et voyez vous-même la différence.

Barre de recherche du planificateur

Les utilisateurs peuvent facilement trouver des rendez-vous à partir de leur calendrier à l'aide de la nouvelle fonction de recherche d'événements du composant Planificateur. Commencez simplement à taper et le planificateur ne filtre automatiquement que les événements correspondants.

Telerik UI for ASP.NET Core Scheduler Search Box

Intégration avec iCalendar

Vous pouvez facilement intégrer le composant Scheduler à d'autres applications de gestion des rendez-vous telles que Google ou le calendrier Apple en utilisant une bibliothèque tierce (dans ce cas ical.js ) qui prend en charge la norme iCalendar. Consultez l'interface utilisateur pour ASP.NET Core Scheduler iCalendar démo d'importation / exportation .

Configuration de travail et non Jours ouvrés

En utilisant la nouvelle configuration WorkDays vous pouvez facilement définir des jours spécifiques comme ouvrés / non ouvrés dans le calendrier du planificateur. En fonction des jours configurés dans WorkDays, la semaine et les vues TimelineWeek du planificateur Affichera jours ouvrables en blanc et les jours non ouvrés dans des couleurs de fond gris clair.

Interface utilisateur Telerik pour ASP.NET Core jours non ouvrés

Étiquettes flottantes pour les entrées

Vous pouvez maintenant ajouter de fantastiques Étiquettes flottantes à la zone de texte Composants Masked Textbox et Numeric Textbox .


Étiquette flottante Telerik UI ASP.NET Core flottante pour la zone de texte numérique

Les étiquettes flottantes résident à l'intérieur des entrées qu'elles décrivent en mode repos et flottent bien une fois que l'utilisateur commence à taper dans l'élément correspondant.

Voici un exemple de la façon d'ajouter une étiquette flottante à la zone de texte numérique ASP.NET Core:

 @ (Html.Kendo (). NumericTextBox < décimal > ()   
    .Name ( "numerictextbox"  )    
    .Format ( "n0" )    
    .Label (l => l.Content ( "Age" ). Flottant ( true ))    
    ) 

Nouveau rendu pour Calendar, DatePicker, TimePicker et DateTimePicker

Dans R2 2020, nous introduisons une nouvelle propriété de rendu appelée ComponentType qui fournit deux modes distincts (classique et moderne) pour l'interface utilisateur Telerik pour ASP.NET Core Calendrier DatePicker TimePicker et DateTimePicker composants.


Interface utilisateur Telerik pour ASP.NET Core Pickers Date et Time New Rendering

Tout existant les applications continueront de fonctionner avec le mode classique par défaut, et si vous souhaitez profiter du nouveau rendu, définissez simplement la propriété ComponentType sur modern comme indiqué dans l'exemple ci-dessous:

 @ (Html.Kendo () .Calendrier ()   
    .Name ( "calendrier" )    
    .ComponentType ( "moderne" )    
    ) 

Composant spécifique de thème

L'interface utilisateur Telerik pour ASP.NET Core comprend plus de 20 thèmes intégrés tels que Default (notre propre style), Material (basé sur les directives Material Design) et Bootstrap (qui ressemble au style Bootstrap pour mieux s'intégrer). Vous pouvez facilement personnaliser l'un des thèmes prêts à l'emploi ou créer un nouveau thème pour correspondre à vos couleurs et à votre image de marque en utilisant l'application Telerik SASS ThemeBuilder .

Nous avons ajouté une option pratique pour style de composants spécifiques directement dans les démos de composants.


Lancer ThemeBuilder à partir de n'importe quelle page de démonstration du composant ASP.NET Core

En cliquant sur le bouton" Modifier dans le générateur de thème " dans une démo de composant spécifique, l'outil Telerik ThemeBuilder se lance, précharge le composant particulier et vous permet de le personnaliser. Notez que malgré le thème d'un composant spécifique, selon les paramètres que vous devez modifier, il peut encore y avoir des modifications au niveau de l'application .

Style des composants spécifiques avec Telerik ThemeBuilder

Télécharger les dernières nouveautés de Telerik UI pour ASP.NET Core

Nous tenons à vous remercier pour votre soutien continu et vous encourageons à télécharger une version d'essai gratuite de Telerik UI pour ASP.NET Core , ou si vous êtes un détenteur de licence actif, vous pouvez simplement récupérer la dernière et la meilleure sur la page Votre compte! Partagez votre opinion avec nous sur notre portail de rétroaction et aidez-nous à façonner l'avenir de l'interface utilisateur pour ASP.NET Core.

Inscrivez-vous au webinaire Telerik R2 2020

Soyez assurez-vous de vous inscrire au webinaire de la version Telerik R2 2020 le jeudi 21 mai 2020 à 11 h 00 - 12 h 00 HE pour un examen plus approfondi de tous les nouveaux composants et fonctionnalités Telerik de la version.

Joyeux codage ASP.NET Core!