Fermer

mai 14, 2020

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


La version R2 2020 de Kendo UI est enfin là et elle regorge de nouveaux composants et fonctionnalités à travers nos composants jQuery UI! Cela inclut la prise en charge de jQuery 3.5, les nouveaux composants TileLayout et Form (parmi quelques autres) et des fonctionnalités très demandées dans divers composants. Plongeons et découvrons tout ce qui est nouveau avec R2 2020 dans nos composants d'interface utilisateur jQuery!

Prise en charge de jQuery 3.5.1

Commençons par une grosse mise à jour pour tous les développeurs jQuery: avec R2 2020, l'interface utilisateur de Kendo Les composants jQuery prennent désormais en charge jQuery 3.5.1! Cela n'apporte pas vraiment une nouvelle série de fonctionnalités ou quoi que ce soit, mais nous voulons nous assurer que tout développeur jQuery peut utiliser la dernière et la meilleure. Pour découvrir ce que jQuery 3.5.1 apporte à la table, vous pouvez vous référer à cet article de blog sur les blogs officiels jQuery .

Nouveaux composants

Nouveau composant: formulaire

 Interface utilisateur Kendo pour composant de formulaire jQuery "title =" Interface utilisateur Kendo pour composant de formulaire jQuery "/></p data-recalc-dims=

Le nouveau composant Formulaire jQuery de l'interface utilisateur Kendo est conçu pour aider les développeurs jQuery créer des formulaires riches en fonctionnalités de manière plus intuitive, notamment en structurant un modèle de données à lier au formulaire, en ajoutant facilement des éléments d'interface utilisateur appropriés dans le formulaire, ainsi qu'en validant – le tout intégré à un seul composant!

Pour voir comment le composant Form peut vous aider à créer des formulaires dans vos applications, rendez-vous sur les démos jQuery Form .

Nouveau composant: Stepper

 Interface utilisateur de Kendo pour jQuery Stepper Component "title =" Interface utilisateur de Kendo pour jQuery Stepper Component "/></p data-recalc-dims=

Le composant Stepper est un moyen élégant et intuitif de fournir une expérience utilisateur autour de tout ce qui nécessite plusieurs étapes. Le Stepper comprend des visualisations uniques pour les étapes passées, actuelles et futures et chaque étape dispose d'un modèle complet vous permettant, en tant que développeur, d'avoir un contrôle total sur le contenu à chaque étape.

Pour plus d'informations sur le composant Stepper de l'interface utilisateur de Kendo , consultez ces démos en ligne .

Nouveau composant: Textbox

 Interface utilisateur de Kendo pour le composant jQuery TextBox "title =" Interface utilisateur de Kendo pour le composant jQuery TextBox "/></p data-recalc-dims=

Avec notre travail autour du composant Form, nous nous avons réalisé que nous devions inclure un composant Textbox standard dans la suite jQuery. Auparavant disponible sous forme de primitives CSS pouvant être ajoutées à un élément d'entrée HTML simple, avec R2 2020, nous introduisons un composant autonome jQuery Textbox.

Voici un lien rapide vers les démos de Kendo UI Textbox pour voir le composant en action .

Nouveau composant: TileLayout

 Kendo UI pour jQuery TileLayout component "title =" Kendo UI pour jQuery TileLayout component "/> [19659007]Le Le nouveau composant Kendo UI TileLayout est un composant unique créé spécifiquement pour les développeurs qui cherchent à fournir un type de disposition de tableau de bord interactif dans leurs applications. Le TileLayout se compose de plusieurs tuiles qui peuvent être organisées par plages de lignes et de colonnes, et une fois qu'elles ont été rendues, les utilisateurs finaux peuvent faire glisser et déposer les tuiles pour réorganiser ce qui est affiché en fonction de leurs préférences. Bien sûr, chaque vignette peut être entièrement personnalisée pour permettre l'affichage de tout type de contenu.</p data-recalc-dims=

Pour voir une démo du composant TileLayout en action, passez à la section Démonstrations jQuery du composant .

Fonctionnalités étendues des composants

Scheduler – Virtualization

 Kendo UI for jQuery Scheduler with Vertical Grouping and Virtualization "title =" Kendo UI for jQuery Scheduler with Vertical Grouping and Virtualization "/></p data-recalc-dims=

L'un des plus La virtualisation, une caractéristique clé pour gérer de grands ensembles de données dans n'importe quel composant, est la demande de fonctionnalité la plus populaire pour Kendo UI Scheduler. Eh bien, avec R2 2020, l'attente de cette fonctionnalité est terminée! Le Kendo UI Scheduler dispose désormais d'une virtualisation intégrée pour aider faites défiler de grandes collections d'événements dans un planificateur d'interface utilisateur Kendo tout en conservant un défilement fluide.

Pour voir le composant Planificateur avec virtualisation activée, rendez-vous sur cette démo en ligne [19459009

Scheduler – Prise en charge iCal

Une autre grande fonctionnalité qui a été demandée pour le Scheduler est l'intégration avec le format iCal. Je suis heureux de dire qu'à partir de R2 2020, l'importation et l'exportation iCal sont désormais prêtes à l'emploi avec le Kendo UI Scheduler. Pour ceux qui ne sont pas familiers, iCal est un format de données populaire pour les systèmes de planification et de calendrier. Cela signifie que les développeurs et les utilisateurs peuvent facilement importer et exporter des événements en utilisant ce format commun.

Pour plus de détails, consultez la démo de support iCal pour Kendo UI Scheduler .

Scheduler – Search & Options de filtrage

 Interface utilisateur Kendo pour jQuery Scheduler avec recherche "title =" Interface utilisateur Kendo pour jQuery Scheduler avec recherche "/></p data-recalc-dims=

Rester en ligne avec la gestion de grands ensembles de données, pouvoir filtrer des éléments est extrêmement C'est pourquoi, avec R2 2020, le planificateur d'interface utilisateur de Kendo dispose désormais d'un panneau de recherche intégré permettant aux utilisateurs de saisir les valeurs avec lesquelles ils souhaitent filtrer les événements disponibles.

Pour voir à quel point cette recherche est intuitive et le mécanisme de filtrage du Planificateur est, rendez-vous sur cette démo en ligne présentant la fonctionnalité .

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

Le DataSource est un concept central de la bibliothèque jQuery de l'interface utilisateur Kendo et fournit de nombreuses fonctionnalités qui aident autour des données b induisant l'un des composants de l'interface utilisateur de Kendo. Ceci, bien sûr, inclut la grille d'interface utilisateur de Kendo et d'autres composants qui traitent des données groupées.

Dans le cadre de nos efforts continus pour améliorer la qualité de vie de ces composants, Kendo UI DataSource prend désormais en charge le regroupement à distance côté serveur. Cela permet aux développeurs d'organiser et de regrouper les données sur le serveur et de les renvoyer aux composants de l'interface utilisateur de Kendo plutôt que de traiter les données exclusivement côté client.

Il y a beaucoup de scénarios à couvrir, mais pour voir comment configurez DataSource pour tirer parti du regroupement côté serveur, accédez à cette page .

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

 Interface utilisateur de Kendo pour jQuery Validator " title = "Kendo UI for jQuery Validator" /></p data-recalc-dims=

En s'appuyant sur les exigences requises pour le composant Form, le Kendo UI 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 bien sûr fonctionner avec n'importe quelle forme, mais fonctionne extrêmement bien avec le composant Formulaire jQuery de l'interface utilisateur de Kendo!

Pour voir les nouvelles fonctionnalités du validateur en action, consultez cette démo .

Entrées – Prise en charge des étiquettes flottantes

Popularized par Material Design, Floating Les étiquettes sont devenues un incontournable de tout langage de conception et de toute application Web. Afin de prendre en charge tous les aspects des tendances de conception populaires, les entrées Kendo UI TextBox, NumericTextBox et MaskedTextBox prennent désormais en charge l'ajout d'étiquettes flottantes.

Bien que cela affecte quelques entrées jQuery Kendo UI, consultez ceci en ligne démo pour voir les étiquettes flottantes en action .

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

 Kendo UI for jQuery Calendrier, date et Time Picker Rendering "title =" Kendo UI pour jQuery Calendar, Date, and Time Picker Rendering "/></p data-recalc-dims=

Alors que l'interface utilisateur de Kendo pour jQuery date and time pickers (Calendar, DatePicker, DateTimePicker et TimePicker), les composants existent dans l'interface utilisateur de Kendo depuis un certain temps, avec R2 2020, nous avons introduit un rendu alternatif pour chaque composant afin de fournir une nouvelle apparence.

Cette conception provient des commentaires des développeurs jQuery existants ainsi que des développeurs d'autres versions de l'interface utilisateur de Kendo. Les composants ont toujours leur valeur par défaut lo ok and feel, donc pour profiter de ce nouveau rendu, il suffit de travailler avec une seule option de configuration. ]

Avez-vous des commentaires?

Avons-nous oublié un composant ou une fonctionnalité que vous attendiez? Faites-le nous savoir en fournissant des commentaires dans notre portail public de commentaires jQuery ! Vous pouvez rechercher d'autres éléments de rétroaction et voir si quelqu'un a soumis une demande similaire, puis voter et commenter, ou soumettre vos propres commentaires si cela n'a pas été demandé auparavant.

Rejoignez-nous pour un webinaire en direct! [19659003] Pour une plongée plus approfondie dans ce que nous avons couvert dans cet article de blog, vous devriez consulter le webinaire en direct moi-même et mes collègues Developer Advocate organisent avec le webinaire en direct sur l'interface utilisateur de Kendo le mardi 19 mai à 11h00. AM ET! Nous couvrons tous les produits du bundle Kendo UI, et la session spécifique jQuery commence à 12 h 00 HE. Nous avons un nombre limité de places pour ce webinaire, alors assurez-vous de vous y rendre et de vous inscrire pour réserver votre place dès aujourd'hui!





Source link