Nouveautés de l'interface utilisateur de Kendo avec R2 2020

La version R2 2020 de Kendo UI est arrivée! Cette version est livrée avec plusieurs mises à jour dans les bibliothèques jQuery, Angular, React et Vue!

Puisque nous couvrons tous les produits trouvés dans l'interface utilisateur de Kendo, ce message fonctionnera un peu sur le long terme. Je vais réduire les choses pour chaque section avec un lien de suivi vers un article plus approfondi pour chaque bibliothèque JavaScript. Allons de l'avant et sautons droit dans le nez!

jQuery

Nouveaux composants

Nouveau composant: Form

Avec R2 2020, nous avons ajouté le nouveau composant Kendo UI jQuery Form. Ce composant d'interface utilisateur est conçu pour aider les développeurs jQuery à créer des formulaires riches en fonctionnalités et de manière plus intuitive, notamment en structurant un modèle de données à lier au formulaire. Bien sûr, la façon de gérer la validation à partir d'une expérience utilisateur et du modèle lui-même est intégrée!

Nouveau composant: Stepper

La nouvelle interface utilisateur de Kendo pour jQuery Stepper est conçue spécifiquement pour fournir une expérience utilisateur autour de tout dans une application Web qui peut nécessiter plusieurs étapes. Le Stepper comprend des visualisations uniques pour les étapes passées, actuelles et futures. Il a également des états non valides et valides pour chaque étape du Stepper. Bien sûr, les développeurs ont un contrôle total sur chaque étape avec la fonctionnalité de modèle fournie.

Nouveau composant: TextBox

Auparavant disponible sous forme de primitives CSS qui pouvaient être ajoutées à un élément d'entrée HTML simple, nous avons réalisé que nous pouvions offrir plus de fonctionnalités. en introduisant un véritable composant jQuery UI. C'est pourquoi nous présentons le nouveau composant Kendo UI pour jQuery TextBox!

Nouveau composant: TileLayout

Pour les scénarios qui nécessitent des tableaux de bord interactifs où les utilisateurs peuvent faire glisser et déposer du contenu autour de la page, le nouveau composant Kendo UI TileLayout est un composant parfait. Le TileLayout se compose de plusieurs blocs de construction, appelés Tiles, qui peuvent être configurés de manière très similaire au fonctionnement d'une disposition CSS Grid ou Bootstrap en définissant des colonnes et des lignes, ainsi que le nombre d'unités de chaque un Tile particulier peut prendre. Les utilisateurs finaux peuvent ensuite faire glisser et déposer les vignettes pour réorganiser la disposition afin de personnaliser leurs paramètres.

Nouvelles fonctionnalités des composants existants

Scheduler – Virtualization

Avec R2 2020, l'interface utilisateur de Kendo pour jQuery Scheduler arrive maintenant avec virtualisation intégrée lors du défilement vertical.

Scheduler – Prise en charge iCal

Avec R2 2020, nous avons introduit la possibilité pour l'interface utilisateur de Kendo pour jQuery Scheduler d'importer et d'exporter des événements au format iCal. . Cela peut être fait à la fois par programme et par l'utilisateur final, garantissant que le format iCal peut être utilisé à tout moment pendant

Planificateur et options de recherche et de filtre

L'interface utilisateur de Kendo pour jQuery Scheduler a maintenant une recherche intégrée qui apparaîtra en haut du composant, permettant à vos utilisateurs de filtrer les événements en fonction de la chaîne qu'ils ajoutent à la zone de texte. Le mode de filtrage (si vous voulez commence par ou contient ) peut être défini dans les options de configuration du composant pour garantir une expérience utilisateur la plus intuitive.

DataSource – Prise en charge du regroupement à distance côté serveur

Tous les composants liés aux données dans l'interface utilisateur de Kendo pour jQuery dépendent de l'utilisation de DataSource pour la liaison des données. Donc, chaque fois que nous ajoutons une nouvelle fonctionnalité à cet élément du cadre, il est excitant de partager les nouvelles! Avec R2 2020, nous avons ajouté la possibilité de faire un regroupement à distance côté serveur lors de la liaison via DataSource. Cela vous aidera à organiser les données côté serveur, par rapport à une opération coûteuse sur le client, limitant la quantité de données nécessaires sur le client à la fois et peut permettre des groupes de chargement à la demande dans des composants tels que l'interface utilisateur de Kendo pour la grille jQuery .

Validator – Nouveau résumé de validation et prise en charge du rendu de validation en ligne

Poursuivant l'histoire des formulaires, l'interface utilisateur de Kendo pour jQuery Validator a ajouté la prise en charge d'une zone de résumé de validation, ainsi que du rendu de validation en ligne. Cela peut être utilisé soit par le biais du composant Validator autonome, soit en tant que fonctionnalité du nouveau composant Kendo UI for jQuery Form.

Entrées – Prise en charge des étiquettes flottantes

Les étiquettes flottantes peuvent être trouvées partout, pas seulement dans Material Design conceptions spécifiques, et avec R2 2020, nous avons ajouté la prise en charge des étiquettes flottantes dans l'interface utilisateur de Kendo pour les composants d'entrée jQuery TextBox, NumericTextBox et MaskedTextBox.

Calendar, DatePicker, DateTimePicker et TimePicker – Nouvelles options de rendu

nous pouvons suivre les dernières tendances en matière d'expérience utilisateur, avec R2 2020, nous avons introduit une nouvelle option de rendu mise à jour pour l'interface utilisateur de Kendo pour jQuery Calendar, DatePicker, DateTimePicker et TimePicker. Les composants auront toujours leur aspect traditionnel par défaut, mais les nouvelles options de rendu peuvent être activées via une option de configuration.

Pour plus d'informations

Pour voir des informations plus détaillées, ainsi que des images et des gifs, de tout ce que j'ai mentionné ci-dessus, dirigez-vous vers Quoi de neuf dans l'interface utilisateur de Kendo pour jQuery avec l'article de blog R2 2020 !

Angulaire

Lignes directrices du formulaire

Chaque application a besoin d'un formulaire et de la création de formulaires est difficile! En surface, cela peut sembler ajouter quelques éléments d'entrée et vous êtes parti pour les courses, mais il y a vraiment beaucoup plus. C'est pourquoi nous avons rassemblé l'interface utilisateur de Kendo pour les formulaires angulaires – un guide complet pour la création de formulaires dans Angular en utilisant des éléments HTML ou l'interface utilisateur de Kendo pour les composants angulaires.

Nouveaux composants

Nouveau composant: Stepper

Le nouveau L'interface utilisateur Kendo pour Angular Stepper est le composant parfait pour décomposer n'importe quel processus en étapes de la taille d'une bouchée. Chaque étape du stepper peut être entièrement contrôlée en termes de contenu et le composant est livré avec des styles pour les étapes futures, actuelles et passées ainsi que des étapes valides ou non valides lorsqu'une partie de votre stepper peut avoir besoin de validation lors de la navigation à travers les différentes étapes .

Nouveau composant: zone de dépôt externe

Avec le nouveau composant de zone de dépôt externe, les développeurs peuvent ajouter une zone où les utilisateurs peuvent faire glisser et déposer un fichier depuis leur système de fichiers et le déposer pour qu'il soit géré d'une manière ou d'une autre dans leur application angulaire. . Traditionnellement faisant partie du composant de téléchargement, nous le proposons maintenant en tant que composant autonome basé sur les commentaires des utilisateurs.

En prime, le composant est également proposé sous forme de directive qui ne vient pas avec le style, mais ajoute le glisser-déposer

Nouveau composant: téléavertisseur

Les utilisateurs de l'interface utilisateur de Kendo pour Angular Grid ou TreeList reconnaissent le téléavertisseur comme le moyen intégré de navigation dans les pages de ces composants. Sur la base des commentaires des utilisateurs, nous avons réalisé qu'il existe un appétit pour avoir cela en tant que composant autonome. Ainsi, avec R2 2020, nous introduisons l'interface utilisateur de Kendo pour Angular Pager, permettant à tous les développeurs Angular de fournir aux utilisateurs finaux un moyen intuitif de parcourir les données.

Nouveau composant: étiquette

Avec R2 2020, nous avons également introduit un nouvelle interface utilisateur de Kendo pour le composant Angular Label. Auparavant uniquement disponible en tant que directive, le composant d'étiquette fournit des fonctionnalités supplémentaires telles que l'affichage des étiquettes facultatives .

Nouveaux composants: FormField, Hint et Error

En développant les composants disponibles pour les formulaires, sur la base de nos recherches et efforts autour des directives de l'interface utilisateur de Kendo pour les formulaires angulaires, avec R2 2020, nous avons introduit l'interface utilisateur de Kendo pour les composants Angular FormField, Hint et Error. Ces composants aident à structurer les formulaires et à lier des champs de formulaire individuels à des groupes de composants tels que l'entrée, les étiquettes et les nouvelles indications et étiquettes d'erreur.

Nouvelles fonctionnalités des composants existants

TreeList – RTM Release

Nous sommes super heureux d'annoncer qu'avec R2 2020, l'interface utilisateur de Kendo pour Angular TreeList est officiellement publiée en tant que RTM! Cela inclut une multitude de nouvelles fonctionnalités ajoutées, notamment:

• Sélection
• Virtualisation
• Navigation au clavier
• Conformité à l'accessibilité

De nombreux développeurs de Kendo UI pour Angular ont déjà commencé à utiliser Kendo UI pour Angular TreeList dans son sous forme bêta, mais pour ceux d'entre vous qui attendent jusqu'à la v1, vous pouvez télécharger le dernier package et lancer les choses.

TreeView – Bouton Charger plus

Dans un effort pour augmenter les performances dans l'interface utilisateur de Kendo pour les composants angulaires qui finissent par être manipulés beaucoup de données, nous avons jeté un œil à l'interface utilisateur de Kendo pour Angular TreeView et ajouté une nouvelle fonctionnalité avec R2 2020: le bouton «Charger plus». Cela décompose un niveau particulier dans un TreeView et plutôt que de charger toutes les données à la fois et fournit un mini mécanisme de pagination pour charger des morceaux de données dans un seul nœud.

Grille – Persister Développer et réduire les lignes d'état de détail

A Un nouvel ajout à l'interface utilisateur de Kendo pour Angular Grid avec R2 2020 est la possibilité de conserver l'état de développement / réduction des lignes de détail dans la grille de données. Cela vous aidera à vous assurer que les éléments sont correctement développés ou réduits lorsque les utilisateurs travaillent avec des opérations de données (pagination, tri, filtrage et regroupement).

Téléchargement – Style mis à jour

L'interface utilisateur de Kendo pour le téléchargement angulaire a maintenant un aspect mis à jour et ressentez! Plus précisément, cela se présente sous la forme d'une conception mise à jour pour les fichiers téléchargés, y compris de nouvelles icônes en fonction des types de fichiers qui ont été téléchargés.

Interface conversationnelle – Prise en charge de l'API DialogFlow v2

DialogFlow est l'un des backends de chatbot les plus populaires pour chatbots. Assez récemment, ils ont mis à jour leur API vers la v2, qui a quelques mises à jour qui devaient être corrigées. Ainsi, avec R2 2020, nous avons passé du temps à mettre à jour notre exemple avec le composant Kendo UI for Angular Conversational UI pour nous assurer que les exemples mettent correctement en évidence l'intégration avec DialogFlow et montrent l'API v2 mise à jour.

Pour plus d'informations

Si vous suis intéressé par plus d'informations, ainsi que des images et des gifs, de toutes les fonctionnalités que je viens de mentionner passer au Quoi de neuf dans l'interface utilisateur de Kendo pour Angular avec le blog R2 2020 !

React

Consignes relatives aux formulaires

Les formulaires sont difficiles à créer et chaque application React a besoin d'une forme quelconque. Nous voyons beaucoup de nos utilisateurs créer des formulaires et parfois du mal avec la bonne façon de les créer. C'est pourquoi nous avons passé du temps à rechercher les meilleures pratiques en matière de création de formulaires. Toutes nos conclusions ont été intégrées dans les directives de formulaire de KendoReact – disponibles dès maintenant à partir de R2 2020. Les directives de formulaire peuvent aider quiconque à créer des formulaires, même s'ils n'utilisent pas l'interface utilisateur de KendoReact.

Nouveaux composants

Nouveau composant: ListView

Avec R2 2020, nous introduisons le nouveau KendoReact ListView, qui est un composant idéal pour créer une liste déroulante d'éléments . Chaque élément est entièrement personnalisable et vous pouvez profiter de plusieurs dispositions différentes (liste simple, disposition de carte, etc.) pour assurer la meilleure adéquation avec les exigences de votre application.

Nouveau composant: barre de progression et barre de progression de bloc

La barre de progression de KendoReact et la barre de progression de KendoReact Chunk sont deux façons différentes de mettre en évidence une sorte de progression qui se produit dans votre application React. La barre de progression fournit une barre solide du début à la fin, tandis que la barre de progression des blocs est divisée en blocs qui se remplissent à mesure que la valeur augmente.

Nouveau composant: Stepper

Avec R2 2020, nous introduisons également le KendoReact Composant pas à pas qui fournit une interface intuitive pour montrer les progrès tout au long d'une série d'étapes. Chaque étape peut être entièrement personnalisée (le contenu vous appartient) et le composant Stepper est fourni avec des styles intégrés pour les étapes futures, actuelles et passées ainsi que des étapes valides et non valides.

Nouveaux composants: étiquette, étiquette flottante, Astuce et erreur

Dans le cadre de R2 2020, nous avons introduit plusieurs nouveaux composants d'étiquette KendoReact. Ceux-ci incluent:

• Label – comme son nom l'indique, il s'agit d'un composant pour définir spécifiquement les étiquettes dans toutes vos applications React
• Floating Labels – Floating Labels sont à peu près partout (même si cela a commencé initialement) avec Material Design), et avec R2 2020, KendoReact a introduit un composant Floating Label qui peut être utilisé avec tous les composants d'entrée KendoReact.
• Hint & Error – Ces composants aident à fournir un style et des images appropriés à une étiquette chaque fois qu'un

Nouveaux composants: bouton radio et groupe radio

Poursuivant la tendance de créer des composants d'interface utilisateur pour KendoReact qui aident à fournir un style cohérent dans tous les aspects de vos applications React, avec R2 2020 nous sommes introduction des boutons radio et des composants de groupe radio pour aider à fournir des boutons radio ou des groupes de style similaire à tous les autres composants KendoReact.

Nouveau composant: Diapositive r

Le nouveau composant KendoReact Range Slider s'appuie sur le KendoReact Slider existant, mais plutôt que de fournir une valeur unique, les utilisateurs finaux fournissent une plage de valeurs en faisant glisser les poignées pour définir une valeur minimale et maximale.

Nouveau Composant: Forms – FormElement & FieldWrapper

En nous appuyant sur nos efforts pour fournir un composant Form dans KendoReact, nous avons ajouté des composants supplémentaires avec R2 2020 avec les composants KendoReact FormElement et FieldWrapper. À un niveau élevé, ceux-ci aident spécifiquement à structurer les formulaires et à lier les éléments de formulaire et leurs composants associés (étiquettes, conseils et messages d'erreur, etc.).

Nouvelles fonctionnalités des composants existants

TreeList – Virtualisation des lignes

Avec R2 2020, nous introduisons officiellement la virtualisation des lignes avec le KendoReact TreeList! Bien que nous ayons déjà la virtualisation des colonnes, la virtualisation des lignes aide avec les grands ensembles de données qui peuvent être liés à la KendoReact TreeList. Pour les scénarios qui ne peuvent pas utiliser le téléavertisseur, la virtualisation est une bonne alternative pour garantir un défilement fluide même avec des milliers ou des centaines de milliers de lignes.

TreeList – Pager

Dans la lignée de la gestion de grands ensembles de données et l'amélioration des performances, avec R2 2020, KendoReact TreeList a un composant de pageur intégré pour vous aider à parcourir les pages de données dans des collections de données plus importantes.

TreeList – Drag & Drop

Avec la nouvelle fonctionnalité KendoReact TreeList Drag and Drop,

TreeList – Aggregates

Les agrégats offrent aux utilisateurs un moyen de voir un résumé des données trouvées dans le TreeList. Ils peuvent être déplacés d'un niveau de la hiérarchie au suivant. la KendoReact TreeList. Les agrégats tels que la somme ou le nombre (seulement quelques-uns disponibles) sont très utiles pour comprendre les données actuellement liées à la TreeList de KendoReact.

TreeList – Menu de la colonne

Le menu de la colonne dans la TreeList de KendoReact montre une menu contextuel avec des actions supplémentaires qui peuvent être prises sur une colonne particulière. Cela peut inclure des fonctionnalités telles que le filtrage ou l'affichage et le masquage des colonnes de la plus grande collection de colonnes.

TreeList – Exporter au format PDF et Excel

Avec R2 2020, le KendoReact TreeList arbore désormais la possibilité d'exporter le contenu du composant au format PDF ou Excel! Cette fonctionnalité permet aux utilisateurs d'exporter le contenu de la TreeList vers l'un ou l'autre des formats de fichier en un seul clic.

Grille – Filtre de case à cocher

Avec R2 2020, la grille KendoReact ajoute une nouvelle fonctionnalité de filtre de case à cocher, qui affiche une liste de toutes les valeurs uniques. Le contenu exporté peut également être personnalisé pour ajouter des informations supplémentaires ou changer de style (et plus encore). d'une colonne et permet aux utilisateurs de sélectionner ou de désélectionner les valeurs qu'ils souhaitent voir dans le tableau de données.

Planificateur – Rendu personnalisé d'en-tête et de pied de page

Le planificateur KendoReact est un composant puissant avec une énorme collection de fonctionnalités prédéfinies . Bien que l'expérience utilisateur par défaut soit suffisante pour la plupart des scénarios, nous savons que le nom du jeu est de vous approprier les composants de l'interface utilisateur. C'est pourquoi nous continuons d'ajouter la prise en charge des rendus personnalisés dans tous les aspects du composant. Avec R2 2020, le planificateur KendoReact peut désormais transmettre des rendus personnalisés pour les en-têtes et les pieds de page du planificateur.

Formulaire – Validation au niveau du formulaire, FieldArray

Les formulaires constituent une grande partie de la version R2 2020 , et cela inclut l'ajout de la validation au niveau du formulaire et de la nouvelle fonctionnalité FieldArray au composant KendoReact Form. Je plonge un peu plus profondément dans ces composants dans le billet de blog de KendoReact R2 2020, alors vérifiez cela pour plus d'informations.

Drawer – Rendu personnalisé

Avec R2 2020, le composant KendoReact Drawer a ajouté un rendu personnalisé à tous les éléments de Drawer . Cela permet aux développeurs de React d'utiliser un rendu personnalisé pour les éléments du tiroir, donnant un contrôle total sur l'apparence et la convivialité du tiroir KendoReact.

Nouvel exemple d'application: Coffee Warehouse App

Au-delà des composants et fonctionnalités supplémentaires de l'interface utilisateur des composants KendoReact existants, nous voulions également introduire plus d'exemples d'applications présentant les composants de KendoReact fonctionnant ensemble. Avec R2 2020, nous avons créé l'exemple d'application KendoReact Coffee Warehouse qui met en évidence plusieurs composants KendoReact travaillant ensemble pour créer un tableau de bord pour un faux Coffee Warehouse.

Pour plus d'informations

Il y avait beaucoup à couvrir pour KendoReact, mais pour en voir plus une couverture approfondie du nouveau composant et des nouvelles fonctionnalités de KendoReact, rendez-vous sur Quoi de neuf dans KendoReact avec le billet de blog R2 2020 !

Vue

Préparation pour Vue 3.0

Vue.js La version 3.0 est récemment entrée en version bêta, ce qui signifie que nous ne sommes pas trop loin d'une version officielle. Dans cet esprit, l'équipe Kendo UI Vue a travaillé pour assurer la compatibilité avec la version 3.0. Bien que nous ne puissions pas réclamer de soutien officiel pour le moment, nous avons jeté les bases pour nous assurer que nous serons prêts dès que Vue 3.0 sera officiellement supprimée!

Nouveaux composants

Nouveau composant: Calendrier

Ajout à la liste des développer des composants natifs (construits à partir de zéro) pour Vue, avec R2 2020 Kendo UI pour Vue a ajouté le composant Calendrier natif. Ce composant fournit une interface intuitive pour sélectionner une seule date (ou une plage de dates) dans une vue mensuelle similaire au calendrier qui peut être affiché sur le mur de votre cuisine aujourd'hui.

Nouveau composant: DateInput

Avec R2 2020 Kendo UI pour Vue a ajouté le composant natif DateInput. Cet élément de formulaire permet aux utilisateurs de saisir une chaîne de date tout en respectant un format spécifique (que vous pouvez définir à l'avance).

Nouveau composant: DatePicker

Conceptuellement une combinaison des composants ci-dessus, la nouvelle interface utilisateur Kendo pour Vue DatePicker Le composant est un élément de formulaire qui utilise un calendrier contextuel pour sélectionner la date au lieu d'avoir à taper manuellement une date (bien que cela soit certainement encore possible). Bien sûr, ce composant a été entièrement conçu spécialement pour Vue.js sans aucune dépendance tierce.

Nouvelles fonctionnalités des composants existants

Grille – Cellule de pied de page

Avec R2 2020, l'interface utilisateur de Kendo pour les données Vue Grid a ajouté une nouvelle fonctionnalité Footer Cell. La cellule de pied de page fournit un moyen d'afficher des informations supplémentaires en bas (pied de page) de la grille, donnant aux développeurs la possibilité de résumer les données ou d'ajouter des informations supplémentaires à la grille de données.

Grille – Effort de résolution de bogue étendu

Au-delà de l'ajout Avec R2 2020, l'équipe de Kendo UI pour Vue a fait l'objet d'un effort de résolution de bogue étendu pour s'assurer que cette version de Kendo UI pour Vue Grid est la plus stable et la plus robuste à ce jour!

Pour plus d'informations

Pour en savoir plus des informations détaillées sur les nouveautés de l'interface utilisateur de Kendo pour Vue, rendez-vous sur Quoi de neuf dans l'interface utilisateur de Kendo pour Vue avec le billet de blog R2 2020 !

Vous avez des commentaires?

Avons-nous manqué votre composant ou fonctionnalité préféré avec cette version? Avez-vous eu l'occasion d'essayer un nouveau composant et souhaitez-vous nous faire part de vos commentaires sur ce que nous pouvons ajouter? N'hésitez pas à commenter dans la section des commentaires ci-dessous, ou rendez-vous sur notre portail de rétroaction publique et ajoutez-y vos idées! De nombreux éléments que nous avons ajoutés avec R2 2020 provenaient directement des éléments affichés dans notre portail de commentaires, c'est donc un excellent moyen de s'assurer que nous ajoutons un composant dont vous avez besoin!

Rejoignez-nous pour un webinaire en direct!

voir tous les composants et fonctionnalités mentionnés ci-dessus (et plus) en direct et en action? Rejoignez-moi et mes collègues de l'équipe de l'interface utilisateur de Kendo lors de notre webinaire en direct le le mardi 19 mai à 11 h 00 HE ! Nous couvrirons l'ensemble de l'interface utilisateur de Kendo tout au long de la journée, chaque saveur prenant environ 30 minutes chacune. Les places sont limitées, alors rendez-vous sur la page du webinaire pour vous inscrire aujourd'hui et réserver votre place!