Fermer

novembre 10, 2021

Mise à jour de l'interface utilisateur de Kendo et de Telerik de novembre


La mise à jour de novembre de l'interface utilisateur Telerik et Kendo apporte la prise en charge de .NET 6 et VS 2022 avec Angular 13 et plus !

En s'appuyant sur notre mise à jour d'octobreaujourd'hui, je voulais prendre le temps pour couvrir ce sur quoi vos équipes Telerik et Kendo UI préférées de Progress ont travaillé au cours des dernières semaines. Il y a beaucoup à déballer ici, et tout ce que nous mentionnons est disponible dans les dernières versions de chacun de ces produits. Donc, si vous voyez quelque chose que vous souhaitez utiliser, visitez simplement la page Votre compte et récupérez les derniers bits!

Table des matières

  1. Support pour .NET 6 et Visual Studio 2022 Official
  2. Angular 13 Support avec Kendo Interface utilisateur pour Angular
  3. KendoReact
  4. Kendo UI pour jQuery
  5. Telerik UI pour Blazor
  6. Telerik UI pour ASP.NET Core et UI pour ASP.NET MVC
  7. Telerik UI pour ASP.NET AJAX[19659011] Interface utilisateur Telerik pour Xamarin
  8. Interface utilisateur Telerik pour WinUI
  9. Interface utilisateur Telerik pour WPF
  10. Interface utilisateur Telerik pour WinForms
  11. Telerik Reporting et Telerik Report Server
  12. JustMock

Prise en charge de .NET 6 et Visual Studio 2022 Official

.NET 6 and VS 2022 Support" title=".NET 6 and VS 2022 Support"/></p data-recalc-dims=

Les équipes Telerik de Progress ont travaillé dur pour fournir tous les composants d'interface utilisateur Web, de bureau et mobile .NET, Prise en charge des bibliothèques de traitement de documents, des rapports et des outils JustMock pour .NET 6 et Visual Studio 2022 immédiatement après sa mise à disposition lable par Microsoft. Jetez un œil au article de blog dédié et voyez comment vous pouvez bénéficier immédiatement de la dernière et meilleure version des mondes .NET et Telerik.

Angular 13 Support With Kendo UI for Angular

Angular 13 est sorti début novembre et je suis heureux de dire que Kendo UI pour Angular a pris en charge Day-Zero ! Pour ceux d'entre vous qui s'intéressent à ce que cette version d'Angular apporte, nous avons un excellent article de blog couvrant Quoi de neuf dans Angular 13 ici . En ce qui concerne l'interface utilisateur Kendo pour les composants angulaires, mettez simplement à jour la dernière version des packages que vous avez inclus et vous serez prêt à partir. pour plus d'informations.

KendoReact

Améliorations

Grid: Column Virtualization with Multi-Column Headers
Une fonctionnalité importante qui a été ajoutée à la grille de données KendoReact avec cette mise à jour est la possibilité d'avoir des en-têtes multi-colonnes. lors de la virtualisation de notre table de données React. Auparavant, ces deux fonctionnalités ne fonctionnaient pas très bien ensemble, mais avec la mise à jour 4.10.0elles peuvent être activées de manière transparente dans le même composant.

Voir la démo KendoReact Data Table Column Virtualization pour plus d'informations.

Éditeur : Expose Interfaces for onMount, onExecute, onPaste, onFocus et onBlur Events
Aidant à étendre la manière dont les développeurs React implémentent l'éditeur KendoReact avec cette mise à jour, nous avons introduit plusieurs nouveaux événements qui peut être utilisé lors du rendu initial du composant ou lorsque les utilisateurs interagissent avec le contenu. Adaptive Slot Height
KendoReact Scheduler Component - Adaptive Slot Height" title="Composant KendoReact Scheduler - Adaptive Slot Height"/><br data-recalc-dims=Par défaut, le composant KendoReact Scheduler a une hauteur définie et uniforme lorsqu'il doit afficher tous les éléments ou événements disponibles ce jour-là. Cependant, cela peut ne pas être idéal dans les scénarios où les jours peuvent avoir plus d'événements que d'autres, ou il y a des jours spéciaux qui nécessitent que les événements se prolongent un peu plus.

C'est là que la nouvelle fonctionnalité de hauteur de fente adaptative entre en jeu. , car il permet aux créneaux d'événements disponibles dans une journée de s'adapter à tous les événements qui doivent être affichés, ou vous permet même de définir des aspects tels que la hauteur minimale pour garantir que même dans les scénarios où aucun événement ne sera affiché.

Dans la même veine, la nouvelle fonctionnalité Hauteur d'élément automatique offre la même capacité d'ajustement automatique ou d'une hauteur définie lorsque les événements sont affichés de manière horizontale, ce qui est fait dans des vues telles que TimelineView et la TimelineViewMonthViewainsi que la section allDay des vues Day, Week et WorkWeek.

Voici un lien rapide vers les démos React Scheduler Adaptive Slot Height et voici une lien vers React Scheduler Auto Item Hei ght demos.

Kendo UI pour jQuery

Nouveaux composants

PivotGrid Component
Kendo UI pour jQuery PivotGrid Component" title="Kendo UI pour jQuery PivotGrid Component"/><br data-recalc-dims=Nous sommes ravis d'annoncer la sortie de la nouvelle interface utilisateur Kendo améliorée pour jQuery PivotGrid ! Au fil des ans, l'équipe a reçu beaucoup de commentaires sur le composant PivotGrid en particulier, et bien que nous ayons pu ajouter des fonctionnalités ici et là, nous avons réalisé que pour mieux servir tous nos développeurs d'interface utilisateur Kendo, nous devions repenser le PivotGrid à partir du sol en haut. Nous avons utilisé l'expérience acquise au cours d'années de construction et de support d'un tel composant pour voir comment nous pourrions améliorer quelque chose si nous avions la possibilité de refaire les choses. C'est vrai, le nouveau jQuery PivotGrid n'est pas seulement une mise à jour, c'est un tout nouveau composant !

Si vous utilisez déjà le jQuery PivotGrid existant, n'ayez crainte, rien ne changera avec cette mise à jour. Nous avons introduit ce composant séparément sous le nom de « Nouveau PivotGrid » afin que les composants puissent même vivre côte à côte sur la même page. Pour l'instant, PivotGridv2 peut avoir moins de fonctionnalités et moins de fonctionnalités que le PivotGrid d'origine, mais il tire parti d'une conception mise à jour qui a également été créée à partir de zéro pour garantir que l'expérience utilisateur est aussi bonne qu'elle peut être. Nous continuerons à conserver ces composants ensemble pendant un certain temps jusqu'à ce que nous ayons fourni la parité des fonctionnalités (et même étendue au-delà de l'original) et que nous voyions des preuves que la plupart des utilisateurs ont migré vers le nouveau composant.

Pour une ventilation complète des fonctionnalités, veuillez vous référer à la section Nouvelles démos de composants PivotGrid.

Améliorations

ColorPicker: Nouveau design
Kendo UI pour jQuery ColorPicker Component - Redesign" title="Kendo UI pour jQuery ColorPicker Component - Redesign"/><br data-recalc-dims=Le composant Kendo UI pour jQuery ColorPicker a reçu un nouveau design amélioré avec cette mise à jour ! Au fil des années, nous avons fourni un ColorPicker pour jQuery, ainsi que nos autres produits Web, nous avons reçu beaucoup de commentaires autour de ce composant et ont mis à jour la conception pour tenir compte de ces commentaires. instance de ColorPicker ; nouvel aperçu des couleurs où vous pouvez facilement comparer l'ancienne et la nouvelle couleur ; entrées HEX et RVB commutables avec prise en charge de l'opacité ; et un outil de contraste pour montrer aux utilisateurs le rapport de contraste entre deux couleurs.

Pour voir ce nouveau design, consultez la démo jQuery ColorPicker Overview.

PanelBar: Updated Design
Kendo UI pour jQuery PanelBar - Redesign" title="Kendo UI for jQuery PanelBar - Redesign"/><br data-recalc-dims=Avec cette version, le composant Kendo UI pour jQuery PanelBar a également reçu une conception mise à jour. De même, nous avons mis à jour le rendu et les classes appliqués au HTML rendu pour rendre les éléments enfants de la PanelBar plus distinguables lorsque tout le contenu est développé. De plus, les flèches de développement et de réduction ont été mises à jour pour utiliser une flèche en chevron au lieu d'un en triangle.

Voir le nouveau design sur les démos jQuery PanelBar.

Grid: Multi-Column Sorting via CTRL + Click
Kendo UI for jQuery Grid Composant - Multi-tri mis à jour" title="UI Kendo pour jQuery Grid Component - Updated Multi-sort"/><br data-recalc-dims= Alors que l'interface utilisateur de Kendo pour jQuery Grid a la possibilité d'effectuer un tri multi-colonnes depuis les premiers jours de la bibliothèque, avec cette version, nous avons ajouté plus de moyens pour les utilisateurs pour interagir avec les colonnes pour le tri. Plus précisément, cette mise à jour ajoute une fonctionnalité de comportement facultative qui permet aux utilisateurs finaux de trier sur une seule colonne lorsqu'ils utilisent un clic de souris normal et de trier uniquement plusieurs colonnes lorsqu'ils appuient sur le bouton CTRL. Lorsque vous cliquez sur un en-tête de colonne sans appuyer sur le bouton CTRL, la grille revient au tri par une seule colonne. ]Exemple d'application de tableau de bord d'administration
Kendo UI for jQuery - Admin Dashboard Sample Application" title="Kendo UI for jQuery - Admin Dashboard Sample Application"/><br data-recalc-dims=Avec cette mise à jour, nous apportons également un tout nouvel exemple d'application à la liste des applications de démonstration disponibles construites avec l'interface utilisateur Kendo pour jQuery ! Cette application suit la conception et l'architecture d'application des modèles de tableau de bord d'administration populaires qui existent dans la nature. Le tableau de bord d'administration utilise également une large gamme d'interfaces utilisateur Kendo pour les composants jQuery dans une seule application pour aider les utilisateurs nouveaux et vétérans de l'interface utilisateur Kendo.Exemple
Kendo UI for jQuery Drawer Component - Amazon-style Drawer" title="Kendo UI for jQuery Drawer Component - Amazon-style Drawer"/><br data-recalc-dims=Le composant Kendo UI for jQuery Drawer a reçu plusieurs demandes pour une fonctionnalité qui reproduit le style de navigation du menu Amazon. Lorsqu'un utilisateur clique sur un élément de menu, le composant Drawer s'anime au « niveau » suivant du tiroir pour afficher un nouvel ensemble d'éléments de menu. À partir de là, les utilisateurs peuvent naviguer plus profondément ou utiliser la navigation intégrée fournie pour revenir aux niveaux précédents.

Cela a été mis en œuvre dans le cadre de l'un de nos articles de la base de connaissances jQuery car cela nécessite plus de code que ce qui serait normalement trouvé dans l'une de nos démos.

Tous les composants : accessibilité améliorée
Avec cette mise à jour, nous poursuivons également notre série d'améliorations de l'accessibilité de tous les composants Kendo UI pour jQuery. Ces ajouts vont de la résolution des problèmes d'accessibilité signalés dans notre carnet de commandes au renforcement des tests d'accessibilité automatisés que nous effectuons en interne. Le résultat est que la dernière édition de nos composants jQuery continue d'être la première bibliothèque d'interface utilisateur jQuery pour la conformité à l'accessibilité. que l'interface utilisateur de Kendo pour jQuery et ses outils Visual Studio utiles prennent officiellement en charge Visual Studio 2022 ! Prise en charge de Visual Studio 2022, l'interface utilisateur Telerik pour Blazor apporte une extension Visual Studio Code actualisée et améliorée ! Vous pouvez profiter de l'expérience utilisateur améliorée et configurer des thèmes de projet et des échantillons de couleurs en quelques clics lors de la création du projet. Vous pouvez également démarrer un projet Blazor avec le nouveau modèle de projet Admin Dashboard avec une mise en page et des fonctionnalités prédéfinies. Réorganisez la mise en page en fonction de vos besoins, connectez simplement vos données et liez-les aux composants, notamment la grille, la disposition en mosaïque, le tiroir, le calendrier, le formulaire, divers types de graphiques, la carte, etc.

Extension de code Visual Studio Telerik. Blazor" title="Extension de code Visual Studio Telerik Blazor" data-openoriginalimageonclick="true" style="vertical-align: middle;"/></a data-recalc-dims=

À partir de l'interface utilisateur Telerik pour la version Blazor 2.29, nous expédions maintenant le code source du produit pour nos titulaires de licence actifs (disponibles dans la section Votre compte -> Téléchargements).

Interface utilisateur Telerik pour ASP.NET Core et interface utilisateur pour ASP.NET MVC

Fonctionnalités communes

L'interface utilisateur Telerik pour ASP.NET Core et ASP.NET MVC prend en charge Visual Studio 2022, ce qui signifie que vous pouvez développer avec des composants Telerik, utiliser des modèles de projet et des extensions dans la dernière version de l'IDE.Suite aux dernières tendances technologiques, nous avons également fourni la compatibilité pour les versions d'aperçu de .NET 6 tout au long du année, et nous sommes maintenant heureux de partager e à Telerik UI pour ASP.NET Core prend en charge la version officielle de .NET 6.

Nous avons également ajouté quelques améliorations et nouvelles fonctionnalités aux offres ASP.NET MVC et Core et nous les examinerons en détail ci-dessous.

Accès facile aux API côté client et côté serveur
Lien vers les API côté client et côté serveur" title="Lien vers les API côté client et serveur"/><br data-recalc-dims=À la fois côté client et côté serveur Les API sont désormais facilement accessibles à partir des démonstrations de composants de l'interface utilisateur Web de Telerik. Consultez les mises à jour dans la
Démo Data Grid.

Source de données partagée avec le composant ScrollView
UI pour ASP.NET MVC et UI pour ASP.NET Core ScrollView Component - Shared Data Source" title="UI pour ASP.NET MVC et UI pour ASP.NET Core ScrollView Component - Shared Data Source"/>Le composant <a href=ScrollView UI (également connu sous le nom de carrousel) peut désormais référencer la source de données externe et accepter le nom de la source de données comme chaîne dans son . DataSourceméthode de configuration.

Nouvelles fonctionnalités et vues dans le composant d'interface utilisateur ColorPicker
UI pour ASP.NET MVC et UI pour ASP.NET Core ColorPicker Component - Redesigned" title="UI pour ASP.NET MVC et interface utilisateur pour le composant ASP.NET Core ColorPicker - Redesigned"/><br data-recalc-dims=Le Composant ColorPicker fournit désormais des vues Dégradé et Palette enrichies, ainsi qu'une option pratique pour le aux utilisateurs d'effectuer un basculement entre les couleurs prédéfinies (Palette) et les couleurs personnalisées (Dégradé). Il expose également pour les formats d'entrée RVB et HEX et une option pour configurer son format par défaut.

Telerik UI ColorPicker Gradient and Palette Views
UI pour ASP.NET MVC et UI pour ASP.NET Core ColorPicker Component - Contrast Tool" title="UI pour ASP.NET MVC et UI pour ASP.NET Core ColorPicker Component - Contrast Tool"/><br data-recalc-dims= Enfin, le composant fournit des options pour vérification du rapport de contraste des couleurs entre deux couleurs en suivant les niveaux AA et AAA des Web Content Accessibility Guidelines (WCAG).

Modernisation du rendu des composants PanelBar
UI pour ASP. NET MVC et UI pour ASP.NET Core PanelBar Component - Updated Design" title="UI pour ASP.NET MVC et UI pour ASP.NET Core PanelBar Component - Updated Design"/><br data-recalc-dims=Le Composant Telerik PanelBar a reçu un aspect et une sensation légèrement rafraîchis, ce qui est surtout perceptible lorsque tout le contenu i s élargi. Les mises à jour de rendu et de classe garantissent que les éléments enfants se démarquent mieux et que la flèche de développement/réduction du panneau a été remplacée par un chevron.

Interface utilisateur Telerik pour ASP.NET Core – Fonctionnalités spécifiques

Interface utilisateur Telerik pour ASP.NET Core Responsive Panel
Pour compléter la prise en charge du référencement des composants Telerik à l'aide d'assistants HTML et TAG dans les applications ASP.NET Core, nous avons ajouté l'option permettant de brancher le composant d'interface utilisateur de panneau réactif à l'aide de Html.Kendo().ResponsivePanel () configuration.

Interface utilisateur Telerik pour ASP.NET MVC – Éléments spécifiques

Interface utilisateur Kendo pour jQuery - Exemple d'application de tableau de bord d'administration" title="Interface utilisateur Kendo pour jQuery - Exemple d'application de tableau de bord d'administration"/><br data-recalc-dims=Interface utilisateur Telerik pour ASP.NET MVC apporte deux variantes d'une nouvelle ressource : la toute nouvelle application de démonstration Admin Dashboard et le modèle de projet Visual Studio. Les deux fournissent le même cas d'utilisation présentant les composants Telerik dans une application ASP.NET MVC et incluent de nombreux composants d'interface utilisateur en action, notamment Grille, disposition en mosaïque, tiroir, calendrier, formulaire, divers types de graphiques, carte et plus encore.

Interface utilisateur Telerik pour ASP.NET AJAX

Les mises à jour de novembre couvrent également les composants Telerik AJAX ! la sortie de Telerik UI pour ASP.NET AJAX plusieurs améliorations d'accessibilité, la mise en œuvre de plusieurs éléments de portail de commentaires, une nouvelle démo et la prise en charge de Web Live Preview.

Reporting Integration Demo
Telerik UI pour ASP .NET AJAX et Telerik Reportin g Integration" title="Telerik UI for ASP.NET AJAX and Telerik Reporting Integration"/><br data-recalc-dims= Sur la base de vos commentaires, nous avons ajouté une démo dédiée présentant l'intégration entre le
composant RadGrid UI et Telerik Reporting et comment vous pouvez transmettre et afficher des donnéesASP.NET AJAX Grid dans une WebForms Report Viewer.

Prise en charge de Web Live Preview
Vous pouvez maintenant configurer votre Telerik ASP.NET AJAX contrôle directement dans le navigateur ainsi que dans Visual StudioDesigner en utilisant les puissantes capacités de Microsoft Web Live Preview(WLP). La fonctionnalité CSSAuto-Sync vous permet de personnaliser l'apparence des contrôles Telerik et la disposition de la page sans quitter Visual Studio.

TelerikUI forXamarin

Le contrôle Calendrier et planification est essentiel dans les scénarios où les utilisateurs doivent suivre leur emploi du temps et gérer efficacement leurs réunions. Avec l'application intégrée de l'interface utilisateur de planification les utilisateurs peuvent rapidement créer, modifier et supprimer des rendez-vous. Avec la version R3 2021 Service Pack, nous avons amélioré cette fonctionnalité en vous fournissant quelques événements pour recevoir une notification dès qu'un rendez-vous est modifié via l'interface utilisateur de planification.

De plus, la version R3 2021 Service Pack en apporte un de plus. événement que vous avez demandé—MonthChangedevent. Nous examinerons ces nouvelles fonctionnalités en détail ci-dessous.

Événement pour le changement de mois

Lorsque le calendrier est en vue Mois, les utilisateurs peuvent naviguer rapidement entre les mois d'un seul geste. Désormais, avec le nouvel événementMonthChangedvous pouvez suivre quand le mois en cours est mis à jour et implémenter une logique personnalisée en conséquence, par exemple, charger certains événements pour ce mois.

Événements pour les changements de rendez-vous

Changement de rendez-vous les événements seraient très utiles dans de nombreux scénarios : que vous ayez besoin de conserver les données du rendez-vous dans une base de données, que vous deviez informer l'utilisateur qu'une modification particulière a été apportée, et plus encore.

Comme leurs noms l'indiquent,Rendez-vous ajouté est déclenché lorsqu'un nouveau rendez-vous est créé,Rendez-vous supprimé lorsque l'utilisateur a supprimé un rendez-vous concret etRendez-vous mis à jour lorsque l'utilisateur a modifié une propriété d'un rendez-vous existant .

La partie délicate est ici dans le cas derendez-vous récurrents. Lorsque l'utilisateur de l'application ajoute une occurrence d'exception, ou met à jour ou supprime une occurrence (toutes ces options sont disponibles via les interfaces utilisateur de planification intégrées), l'événementAppointmentUpdated est déclenché, car en fait le La règle de récurrence du rendez-vous a été mise à jour.

Les trois événements fournissent des arguments d'événement de type AppointmentChangedEventArgs. AppointmentChangedEventArgs contient tous les détails nécessaires liés au changement de rendez-vous concret, tels que le rendez-vous lui-même et, en cas de rendez-vous répétés, l'occurrence et l'action d'occurrence (valeurs possibles : Aucun, Ajouter, Mettre à jour et Supprimer ).

La capture d'écran ci-dessous montre les messages de notification affichés sur les changements de rendez-vous avec de brèves informations sur les mises à jour concrètes. Vous pouvez vérifier la mise en œuvre exacte dans notre documentation ici :Calendrier et planification : exemple d'événements de modifications de rendez-vous.

xamarin-scheduling-events" title="xamarin-scheduling-events"/>[19659019]Pour plus d'informations sur le R3 2021 SP pour l'interface utilisateur Telerik pour Xamarin, consultez nos <a href=Notes de version.

TelerikUI forWinUIv0.6.0

Nous sommes ravis d'annoncer l'interface utilisateur Telerik pour WinUI La version v0.6.0 est livrée avec un nouveau contrôle dans le cadre de notre suite d'interfaces utilisateur en expansion, la prise en charge de la dernière version stable du SDK de l'application Windows et une extension Visual Studio. Démos de bureau

winui-Demo-app" title="winui-Demo-app"/></p data-recalc-dims=

La version de bureau de Telerik UI pourWinUI prend en charge le dernier SDK d'application Windows stable (Project Reunion) 0.8.5. Nous changeons également notre exemple d'application de WinUIUWP à WinUIDesktop et prendrons en charge la dernière version stable du SDK de l'application Windows. Vous pouvez installer l'application à partir de la page Web Telerik UI for WinUI Example et l'essayer ! 😊

Badge Control

Badge-control" title="Badge-control"/></p data-recalc-dims=

La suite Telerik UI pour WinUI s'agrandit avec un autre nouveau contrôle : le Badgecontrol ! Il vous permettra de alertez les utilisateurs et fournissez des informations supplémentaires sur les notifications, les mises à jour, les modifications, les erreurs et tout ce que vous pourriez trouver utile. ou créez le vôtre en fonction des exigences de l'application.

Dans les deux cas, le contrôle vous offre toute la flexibilité nécessaire pour ajuster l'apparence à l'aspect général de votre application. Vous pouvez voir ci-dessous à quoi ressemblent les badges prédéfinis :

badge-examples" title="badge-examples"/></p data-recalc-dims=

Voici quelques-unes des principales caractéristiques du contrôle :




Source link