Mise à jour de l'interface utilisateur Telerik & Kendo de décembre 2021

Découvrez les nouveautés de ce mois-ci dans nos produits Kendo UI et Telerik UI.

Si vous avez été attentif depuis notre mise à jour R3 2021nous avons eu de grandes nouvelles en octobre et novembre. Aujourd'hui, nous partagerons encore plus de cadeaux avec vous pour notre mise à jour de décembre !

Table des matières

1. Telerik UI pour Blazor
2. Telerik UI pour ASP.NET Core & Telerik UI pour ASP.NET MVC
3. Kendo UI pour Angular
4. Kendo UI pour Vue
5. KendoReact
6. Kendo UI pour jQuery

Telerik UI pour Blazor

Nouveau composant d'interface utilisateur de dialogue

En plus des options de dialogue prédéfinies existantes, nous avons ajouté un Composant d'interface utilisateur Telerik Blazor Dialog autonome afin que vous disposiez d'une solution prête à l'emploi pour créer des fenêtres contextuelles d'interface utilisateur simples et complexes.

La boîte de dialogue est pratique pour afficher des informations à l'utilisateur et fournit plusieurs options de personnalisation telles que la largeur, la hauteur, le titre, la visibilité, le contenu et les modèles de bouton d'action, fermer sur un clic de superposition et plus encore.

Grille de données et TreeList Améliorations des composants

Personnalisation de la grille d'exportation vers Excel n Options

Dans la version actuelle, nous avons inclus un ensemble d'options de personnalisation Excel pour le composant Grid . Vous pouvez désormais définir les éléments de données ou les colonnes à inclure dans le fichier exporté (via l'événement OnBeforeExcelExport), contrôler la largeur des colonnes exportées, bénéficier d'une prise en charge transparente de l'exportation des valeurs enum et déclencher l'exportation Excel et CSV par programmation (via le nouveau méthodes dans l'API).

Améliorations de Data Grid et TreeList SearchBox

Le l'entrée du champ de recherche de la grille de données et les critères de filtrage peuvent désormais être facilement effacés en utilisant l'icône X dans le champ, la touche Échap ou par programmation.

Modification améliorée de la grille de données et de la liste des arbres
Nous avons amélioré l'UX de modification de grandes grilles de données Blazor (y compris celles avec un nombre élevé de colonnes et de lignes et celles avec une virtualisation horizontale ou verticale). Désormais, quelle que soit la position d'une cellule modifiée ou l'endroit où les utilisateurs naviguent à, la grille de données garantit que les cellules particulières sont visibles, ciblées et sélectionnées afin qu'elles puissent fonctionner avec elles de manière transparente.

L'amélioration d'édition est également disponible pour le composant TreeList et peut être consultée dans les démos dédiées. [19659014]Validation améliorée de la grille de données et de la liste d'arbres
Dans les composants Telerik Blazor Grid et TreeList, nous avons ajouté deux fonctionnalités : la désactivation de la validation intégrée et la possibilité pour les développeurs d'en créer une personnalisée (différente de la validation par défaut DataAnnotationValidator).

Les deux fonctionnalités sont disponibles avec la balise GridValidationSettings/GridCustomValidatorTemplate pour le composant Grid, et avec TreeListValidationSettings/TreeListCustomValidatorTemplate pour le TreeList.

TabStrip UI Component Enhancements

Un autre composant très utilisé dans les applications Blazor a reçu un boost de fonctionnalités dans le La version 2.30.0—le TabStrip! Nous avons exposé deux nouveaux paramètres : PersistTabContentqui détermine si le contenu des onglets est persisté lors du changement d'onglet, et Visiblequi permet de contrôler facilement la visibilité de chacun des onglets.

Mode de validation dans les composants d'entrée

Pour rendre la validation fluide et pratique pour tout cas d'utilisation, nous avons introduit un nouveau paramètre enum ValidateOn dans tous les composants d'entrée Telerik Blazor, tels que Date & Time PickersTextBoxNumeric TextBoxMaskedTextBox et TextArea. Le paramètre ValidateOn vous permet de configurer s'il faut déclencher la validation en cas de modification, de flou ou lors de la frappe. Ainsi, avec ces options prêtes à l'emploi, vous pouvez choisir et définir la meilleure option pour chaque scénario.

Nouvelles fonctionnalités dans les graphiques.

Nous avons exposé plusieurs propriétés de graphique demandées via le portail de commentaires dédiéce qui permettra Vous pouvez facilement personnaliser les graphiques de visualisation des données. Les nouvelles fonctionnalités des composants Graphique linéaire et Graphique boursier incluent la configuration de la couleur et de l'opacité de l'arrière-plan de la zone, la largeur de la ligne et le type de tiret.

Interface utilisateur Telerik pour ASP. NET Core & Telerik UI pour ASP.NET MVC

Après novembre, qui était consacré à la prise en charge officielle de .NET 6 et Visual Studio 2022ce mois-ci, la famille de produits Web Telerik .NET apporte un autre ensemble de nouveaux composants, dispose d'un d Mises à jour du code VS.

Nouveau composant PivotGrid

Le mois dernier, nous avons annoncé la sortie du nouveau composant amélioré PivotGrid UI dans notre offre Kendo jQueryet ce mois-ci nous sommes heureux de partager cela il est disponible dans notre interface utilisateur Telerik pour les bibliothèques ASP.NET Core et MVC ! Alors qu'au moment de sa version initiale, le PivotGridv2 peut avoir moins de fonctionnalités et moins de fonctionnalités que le PivotGrid d'origine, les plans sont, dans les prochaines versions, de continuer à étendre ses fonctionnalités jusqu'à ce qu'il atteigne la parité totale avec l'original (et même dépasse it).

Vous pouvez immédiatement profiter du nouveau PivotGridv2, qui a été construit à partir de zéro et a une mise à jour conception pour garantir que les performances et l'expérience utilisateur sont aussi bonnes que possible. Si vous utilisez déjà le PivotGrid existant, n'ayez crainte, rien ne changera avec cette mise à jour. Nous continuerons à conserver les deux composants côte à côte jusqu'à ce que nous voyions preuve que la plupart des utilisateurs ont migré vers le nouveau composant.

Essayez le nouveau composant PivotGrid et découvrez les démonstrations montrant comment trier, filtrer, restituer du contenu personnalisé à l'aide de modèles et exporter au format PDF.

Voir le Nouvelles démos de composants Pivot Grid pour l'interface utilisateur pour ASP.NET Core ou UI pour ASP.NET MVC.

Améliorations du composant Data Grid UI

Comme avec presque toutes les versions, dans la mise à jour de décembre de Telerik UI nous a donné un peu d'amour à la grille. En tant que développeur, vous et les utilisateurs finaux de vos applications pouvez profiter des nouvelles fonctionnalités suivantes :

Tri multi-colonnes de grille via CTRL + clic
et ASP.NET MVC.

Ajuster la largeur de toutes les colonnes au contenu
En utilisant la nouvelle méthode autoFitColumnsvous pouvez afficher une grille élégante avec une largeur minimale possible pour toutes les colonnes ou les colonnes sélectionnées afin que leur texte sous-jacent s'adapte parfaitement sans espaces vides ni habillage.

Grid Rows Drag & Drop

Les grilles de données MVC et Core fournissent désormais une fonctionnalité intégrée qui permet aux utilisateurs finaux de réorganiser des lignes simples et multiples en les glissant-déposant dans la grille et entre deux grilles.

Prise en charge des champs sans chaîne dans le panneau de recherche de Grid

Le panneau de recherche de la grille permet désormais la recherche et le filtrage des valeurs de colonne non-chaîne.

Améliorations des composants de l'interface utilisateur de l'éditeur[19659016]Commandes d'annulation et de rétablissement

Le Composant d'interface utilisateur de l'éditeur pour ASP.NET Core et MVC propose plusieurs outils pour interagir avec son contenu, tels que le formatage de texte enrichi et de tableau, et dans cette version, nous avons ajouté les commandes intégrées Annuler et Rétablir, améliorant encore les capacités du composant.

Mise à jour de l'extension de code Visual Studio

Interface utilisateur Telerik pour ASP.NET Core apporte une extension Visual Studio Code actualisée et améliorée ! Vous pouvez profiter de l'UX mis à jour, configurer la version du framework .NET (y compris .NET 6.0) et définir des thèmes de projet ainsi que des échantillons de couleurs en quelques clics lors de la création du projet.

Vous pouvez également démarrer un nouveau projet avec des paramètres prédéfinis. pages (grille, graphique, formulaire et plus) ou le nouveau modèle de projet de tableau de bord d'administration avec une mise en page et des fonctionnalités prédéfinies. Réorganisez la mise en page en fonction de vos besoins, branchez 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 et plus encore.

Kendo UI for Angular[19659068]Nouveaux composants

Composant de code-barres

Avec cette mise à jour, nous introduisons officiellement l'interface utilisateur Kendo pour le composant de code-barres angulaire. Le nom le trahit, mais l'objectif principal de ce composant est de créer et de restituer des codes-barres valides dans vos applications angulaires.

Le code-barres angulaire prend en charge plusieurs types de codes-barres 1D qui peuvent être définis via les options de configuration disponibles, et les codes-barres peuvent être rendus sous forme d'élément SVG ou Canvas. De plus, ces codes-barres peuvent être exportés aux formats PDF ou PNG.

Pour voir ce que vous pouvez faire avec le nouveau composant Angular Barcode, consultez la Kendo UI for Angular Barcode documentation.

Composant QR Code

Le nouveau composant Kendo UI pour Angular QR Code permet d'ajouter tout type de QR Code à votre Angular applications un jeu d'enfant. Avec la prise en charge intégrée de l'encodage et de la correction d'erreurs, ainsi que la possibilité d'ajouter des superpositions pour des logos personnalisés ou des types de code QR comme le code QR suisse, ce nouveau composant angulaire devrait répondre à toutes les exigences de code QR que vous pourriez avoir. Ces codes QR angulaires peuvent être rendus à la fois sous forme d'éléments SVG et Canvas, et peuvent être exportés vers divers formats tels que PDF ou PNG.

Voici un lien direct vers la Kendo UI pour la documentation du composant Angular QR Code.

Améliorations

Prise en charge d'Angular 13
Angular 13 est sorti début novembre 2021, et Kendo UI pour Angular bénéficie d'un support officiel depuis Day Zero. Si votre équipe cherche à mettre à niveau vers le dernier et le meilleur dans le cadre angulaire, vous pouvez mettre à jour en toute sécurité votre interface utilisateur Kendo pour les références angulaires. La fenêtre affiche un événement à valider avec le client, avec une heure de début et de fin, et un champ pour la progression affichant 25 %. » title= »Gantt-Tasks Editing »/>

Avec la nouvelle capacité d'édition, l'interface utilisateur Kendo pour Angular Gantt continue d'ajouter des fonctionnalités hautement prioritaires qui sont nécessaires pour publier officiellement la v1 du Gantt. Avec cette fonction d'édition, les utilisateurs peuvent éditer des éléments directement dans la partie TreeList du composant en utilisant l'édition dans la cellule (les cellules individuelles sont éditées).

De plus, le Gantt peut être configuré pour utiliser une boîte de dialogue intégrée pour aider à l'édition. , accessible en interagissant avec les tâches affichées sur le côté droit du composant.

Pour plus d'informations, voici un lien vers la section de documentation Kendo UI for Angular Gantt Editing.[19659014]Gantt : Sélection

Le composant Angular Gantt a également reçu la fonction de sélection avec ce Libération. La sélection fonctionne en interagissant avec la structure de données sur le côté gauche du Gantt en sélectionnant des lignes simples ou en cliquant sur des tâches sur le côté droit.

Voici un lien rapide vers l'UI Kendo pour la sélection angulaire du Gantt docs et démos.

Éditeur : Tout sélectionner et outils d'impression

Ajout à une liste déjà impressionnante d'outils disponibles dans l'interface utilisateur Kendo pour Angular Editor, cette dernière version inclut les outils Sélectionner tout et Imprimer.

L'outil Sélectionner tout, comme son nom l'indique, est un outil pratique permettant aux utilisateurs de sélectionner tout le contenu dans l'éditeur à l'aide d'un outil dans la barre d'outils, ce qui est un moyen très intuitif d'interagir avec l'éditeur angulaire.

L'outil d'impression permet aux utilisateurs d'imprimer uniquement le contenu de l'éditeur via un outil intégré au composant lui-même. Cela simplifie le processus d'impression, car l'éditeur lui-même saura comment imprimer le contenu et n'exige pas que les développeurs écrivent leur propre logique autour de l'impression. Section de documentation sur la sélection de l'éditeur.

Éditeur : redimensionnement de l'image

Avec cette dernière version, l'interface utilisateur de Kendo pour Angular Editor prend désormais en charge la possibilité de redimensionner les images dans la zone de contenu à l'aide de poignées de déplacement. Il s'agit d'une grande amélioration de la qualité de vie pour les utilisateurs finaux de l'éditeur car il offre un moyen intuitif de personnaliser et d'interagir avec les images dans l'éditeur angulaire. ] Exemple de présentation de l'interface utilisateur de Kendo pour l'éditeur angulaire.

Graphique : Panoramique et zoom améliorés

Pendant le panoramique et le zoom font partie de l'interface utilisateur de Kendo pour les graphiques angulaires depuis un certain temps, avec cette dernière mise à jour, nous avons amélioré le comportement et les performances de ces interactions. Cela devrait conduire à un graphique angulaire plus intuitif et plus réactif dans l'ensemble sans aucune configuration supplémentaire nécessaire. section.

Commutateur : taille personnalisée et étiquettes longues

Le composant de commutateur angulaire fournit une expérience utilisateur intuitive et épurée pour basculer entre deux valeurs. Le plus souvent utilisé pour représenter les états On/Off ou True/False, il peut y avoir des exigences où le texte affiché à l'utilisateur ne correspond pas à ces deux scénarios.

Avec cette version, nous avons inclus un article de documentation et un exemple montrant comment pour personnaliser le composant Kendo UI for Angular Switch pour qu'il s'adapte aux dimensions personnalisées et comment il permet d'afficher des étiquettes plus longues dans le composant. Cela devient également très utile pour l'internationalisation, où les messages localisés ont des chaînes qui dépassent les dimensions par défaut. Documentation du commutateur angulaire ici.

Scheduler: Current Time Marker

Beaucoup de gens là-bas, utilisez l'interface utilisateur de Kendo pour Angular Scheduler non seulement pour planifier et gérer des événements, mais également pour gérer leurs calendriers quotidiens. Cela signifie que le composant Angular Scheduler est souvent l'outil incontournable pour planifier une journée et savoir exactement quand les événements se produisent. Une grande fonctionnalité de qualité de vie est le marqueur d'heure actuelle, qui affiche une ligne distincte à travers la zone d'événement du planificateur pour indiquer l'heure actuelle.

Bien que cela ait déjà été disponible dans le planificateur angulaire, c'était un peu d'une caractéristique cachée. Ainsi, avec cette mise à jour, nous avons soigneusement documenté cette fonctionnalité pour faciliter la recherche et l'activation du marqueur d'heure actuelle.

Voici un lien rapide vers la documentation du composant Kendo UI for Angular Scheduleroù vous peut voir cela et plus encore en action.

Kendo UI pour Vue

Nouveaux composants

ProgressBarComponent

La nouvelle interface utilisateur Kendo pour VueProgressBarcomponent fournit un composant d'interface utilisateur Vue 100% natif pour afficher à tout moment la progression. Ce composant s'affiche sous la forme d'une barre qui peut ensuite être remplie afin de montrer la progression vers l'achèvement d'un processus. Les valeurs du processus terminé ainsi que la progression peuvent être liées à des variables individuelles. La VueProgressBar peut être affichée de manière verticale ou horizontale et prend en charge à la fois la direction de gauche à droite et de droite à gauche pour remplir la ProgressBar.

Pour plus d'informations, vous pouvez vous référer à la Section de documentation de l'interface utilisateur de Kendo pour Vue ProgressBar.

Loader Component

Avec le nouveau Kendo UI pour le composant Vue Loader, les développeurs ont un moyen visuellement agréable de montrer qu'une partie de leur application Vue est occupée. Ce composant peut être utilisé pour afficher un indicateur de chargement pour une expérience agréable lorsque les données sont chargées dans d'autres composants de l'interface utilisateur Kendo, ou peut être défini pour tout autre composant Vue. documentation des composants pour plus d'informations.

Drawer Component

Avec cette version, nous avons ajouté le composant Kendo UI pour Vue Drawer, qui peut être utilisé comme élément de navigation latérale de tout composant de bureau ou mobile. Ce composant natif Vue Drawer peut être configuré pour être toujours affiché ou caché derrière un menu hamburger et se développer uniquement lorsque l'utilisateur clique sur un bouton spécifique.

Pour en savoir plus sur ce composant et comment l'ajouter à vos applications Vue. , consultez la Kendo UI for Vue Drawer docs et démos.

Stepper Component

L'interface utilisateur de Kendo pour Vue Stepper peut être utilisée pour visualiser la progression d'un processus en divisant ledit processus en étapes. Chaque étape peut contenir n'importe quel type de composants Vue, de sorte que les développeurs ont un contrôle total sur le contenu affiché pour chaque étape. flux linéaire strict, et définir la validation à effectuer à chaque étape avant de passer à l'étape suivante.

Voici un lien rapide vers la documentation Kendo UI pour Vue Stepper.

Composant DateRangePicker

Lorsque les utilisateurs doivent sélectionner une date de début et de fin via une interface de liste déroulante et de sélection, la nouvelle interface utilisateur Kendo pour Vue DateRangePicker est parfaite. Grâce à un composant, les utilisateurs sont confrontés à deux éléments de calendrier côte à côte, où ils peuvent sélectionner une date de début et de fin. La valeur de la plage peut facilement être extraite du composant, permettant aux développeurs d'agir sur la plage que les utilisateurs ont sélectionnée. .

KendoReact

Nouveaux composants

FlatColorPicker Component

Le nouveau composant KendoReact FlatColorPicker s'ajoute aux déjà nombreuses façons dont la bibliothèque d'interface utilisateur permet aux utilisateurs sélectionnez une couleur dans les applications React. Ce composant diffère du composant React ColorPicker en n'étant pas rendu dans une fenêtre contextuelle ou une liste déroulante, au lieu de cela, le composant entier est immédiatement rendu sur la page.

Pour voir plus d'informations, consultez la documentation du composant KendoReact FlatColorPicker.

Drag & Drop Utilities

Avec cette mise à jour, nous avons examiné attentivement à ce que KendoReact peut offrir aux développeurs pour les aider à ajouter des fonctionnalités de glisser-déposer à leurs applications React, et nous avons proposé un tout nouvel ensemble de composants et de crochets qui peuvent être utilisés pour ajouter cette interactivité de glisser-déposer.[19659014]Ces nouvelles fonctionnalités incluent les nouveaux composants DragAndDrop, Draggable et Droppable React ainsi que les crochets useDraggable et useDroppable. L'utilisation combinée de ces composants permettra aux développeurs React de répondre à toutes les exigences en matière de capacité de glisser-déposer. s dans leurs applications.

Pour plus d'informations sur la façon d'ajouter un glisser-déposer à vos applications React, rendez-vous sur la section de documentation KendoReact Drag & Drop.

Améliorations

ColorPicker : Nouveau design

Avec cette mise à jour, le composant KendoReact ColorPicker a reçu un nouveau design amélioré. Le composant React ColorPicker était l'un des premiers composants d'interface utilisateur ajoutés à KendoReact, et depuis sa version initiale, nous avons reçu de nombreux commentaires sur ce composant. Avec tous ces retours, nous avons pris le temps de mettre à jour le design et le rendu du ColorPicker.

Ces changements incluent un tout nouveau design avec de nouveaux éléments et fonctionnalités d'interface utilisateur. Plus précisément, ces fonctionnalités incluent la possibilité de passer de la vue Dégradé à la vue Palette dans la même instance ColorPicker, un nouvel aperçu des couleurs où vous pouvez facilement comparer les anciennes et les nouvelles couleurs, et des entrées HEX et RVB basculantes avec prise en charge de l'opacité.

Vous pouvez voir le nouveau design en action en vous dirigeant vers la KendoReact ColorPicker docs.

Grid: Column Virtualization with Multi-Column Headers
Une grande fonctionnalité qui a été ajoutée à la grille de données KendoReact avec ce update 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.

Pour plus d'informations sur l'utilisation des en-têtes multi-colonnes avec les données Tableau, dirigez-vous vers la documentation KendoReact Data Grid.

Sample Project : Full-Stack App Using the KendoReact Grid & ASP.NET Core
The KendoReact Data Table est un composant où les capacités d'affichage, de mise à jour et de réorganisation des données sur le client sont pratiquement infinies. Avec ces capacités vient beaucoup de complexité potentielle, et un domaine qui n'a pas été entièrement documenté est la façon de traiter les requêtes React Table sur le serveur.

Tout est sur le point de changer avec cette mise à jour, car nous introduisons un exemple d'application à pile complète avec la grille de données KendoReact sur le front-end et ASP.NET Core sur le backend. Nous espérons que les développeurs pourront référencer cet exemple lors de la création de leurs propres applications, ce qui contribuera à réduire la complexité de la communication du serveur avec le composant Data Table.

Pour découvrir cette application à pile complète avec React et ASP.NET Core, dirigez-vous vers le référentiel d'exemples d'applications KendoReact.

Exemple de projet : application à pile complète utilisant la grille KendoReact et Node.js
Comme l'élément ci-dessus, cette application à pile complète se concentre sur les fonctionnalités et interactions courantes au sein de la grille KendoReact et sur la manière de gérer ces demandes côté serveur. Cet exemple utilise React sur le frontend et Node.js (en utilisant Express.js spécifiquement) sur le backend, donnant aux développeurs plus d'exemples pratiques pour implémenter l'un des composants d'interface utilisateur les plus puissants de la bibliothèque KendoReact.

Pour le code source. à cette application complète React et Node.js, vous pouvez consulter le dépôt d'exemples d'applications KendoReact ici.

Various Components : Context Provider for Default Props
Cette fonctionnalité peut ne s'appliquera pas à tous les utilisateurs de KendoReact, mais c'est toujours une nouvelle très excitante à partager. D'abord pour un certain contexte.

En général, les composants KendoReact sont construits à l'aide d'autres composants KendoReact, ce qui devient très évident lors de l'utilisation de composants plus avancés comme la table de données React. Au fur et à mesure que nous construisons ces composants, ils peuvent avoir plusieurs couches de ces composants imbriqués qui, si vous cherchez à personnaliser un composant de manière approfondie, peuvent devenir difficiles à gérer en tant qu'utilisateur KendoReact.

Pour rendre les composants KendoReact plus faciles à personnaliser en cas de besoin. , nous avons travaillé en exposant React.Context pour remplacer les propriétés d'un composant profondément imbriqué. Pour cette mise à jour, nous avons introduit le contexte Props dans les packages DateInputs, Inputs et DropDown. Avec cet ensemble plus vaste de composants d'interface utilisateur prenant en charge le nouveau contexte des accessoires, nous souhaitons recueillir les commentaires de nos utilisateurs et comprendre comment nous pouvons aider à étendre cette fonctionnalité à d'autres packages et composants à l'avenir, alors n'hésitez pas à essayer cette nouvelle fonctionnalité et laissez nous savons ce que vous en pensez !

Pour un lien direct, vous pouvez vous référer à l'article DateInputs Prop Contextà l'article Inputs Prop Context et à l'article DropDown Props Context dans notre documentation.

TileLayout : Définir les clés pour éviter le re-rendu

Bien que cette fonctionnalité puisse être plus une mise à jour sous le capot. , vous pouvez obtenir plus d'informations dans la documents du composant KendoReact TileLayout.

TreeView: Custom Renderers

Les moteurs de rendu personnalisés permettent aux développeurs de transmettre leur propre composant React pour être en charge du rendu d'une partie particulière d'un composant d'interface utilisateur KendoReact. Avec cette version, le KendoReact TreeView permet désormais aux utilisateurs de transmettre un composant personnalisé qui sera chargé de rendre chaque nœud dans le TreeView. Cela donnera aux développeurs la flexibilité ultime et garantira que React TreeView peut s'adapter à toutes les exigences de conception. ].

Menu : Rendus personnalisés

Le menu KendoReact prend désormais officiellement en charge un composant pour contrôler l'apparence de chaque menu, également appelé moteur de rendu personnalisé.Cela rend le composant KendoReact Menu encore plus flexible et aidera à mettre en œuvre des exigences de conception et d'expérience utilisateur spécifiques avec le composant de menu.

Pour en savoir plus à propos des rendus personnalisés dans les menus, rendez-vous sur la documentation du menu KendoReact.

PanelBar: Controlled Mode & Tab Mounted Options

Le KendoReact PanelBar a également reçu quelques mises à jour avec cette version. Plus précisément, l'équipe KendoReact a ajouté la prise en charge du mode contrôlé, permettant aux développeurs de contrôler entièrement l'état de la PanelBar au lieu de se fier uniquement au mode non contrôlé.

De plus, l'équipe a ajouté plus d'options autour du cycle de vie de la PanelBar, en particulier lorsque l'onglet a été monté. This gives more opportunities for developers to customize and interact with the React PanelBar component.

Check out the KendoReact PanelBar component documentation here.

Editor: Improved Selection

With this update, the KendoReact Editor has added ways for developers to interact with whatever selection users have made within the React Editor’s content. This will allow for scenarios like automatically extracting the HTML from the Editor’s content upon selection, or extracting content when a user presses a button.

Here’s a direct link to the KendoReact Editor Selection documentation section.

Editor: Editor Resizing

The KendoReact Editor can now allow users to resize the Editor once it has been rendered. Previously the Editor had a static height and width, but with this new resizing feature enabled, users will now see a drag handle when hovering over the edges of the component, giving them an intuitive user experience for resizing the Editor.

For more information, check out the KendoReact Editor Resizing sample.

Editor: Image Resizing

Another update that the KendoReact Editor received with this update is for images in the Editor’s content to be resized. When this feature is enabled, users can click on an image to see a border with drag indicators, letting the user resize images to their heart’s content using a very natural user experience.

To see more about resizing images in the Editor, you can refer to the KendoReact Editor Image Resizing sample.

Kendo UI for jQuery

Enhancements

Editor: Undo & Redo Support

As of this update, the Kendo UI for jQuery Editor now offers the ability for users to undo or redo changes to the content of the Editor component. This feature previously relied upon the browser’s built-in functionality for remembering content, which was not always reliable. With this update, the “stack” containing the changes is built into the jQuery Editor, which will be super helpful to users managing their content. This feature will also be available as a tool within the Editor toolbar to give physical buttons that users can interact with to undo or redo changes to content.

To see more about the Undo and Redo feature in the Editor, you can refer to the Kendo UI for jQuery Editor demos.

Stay Tuned

We will be bringing even more to our products next month when we will see the official R1 2022 release! In the meantime, if you have any ideas for a new component or new features you would like to see added, feel free to add them to our public feedback portals. Happy Holidays!