Nouveautés de R2 2019 pour Kendo UI et jQuery

La version R2 2019 des composants jQuery UI de Kendo UI est arrivée! Cette version apporte des composants très attendus tels que le visionneur et le tiroir PDF, ainsi que des fonctionnalités fréquemment demandées telles que le défilement sans fin dans ListView.

Le mois de mai est enfin arrivé et vous savez ce que cela signifie: place à une nouvelle version de Kendo UI! La version R2 2019 est arrivée et apporte un nombre considérable de nouvelles fonctionnalités et de nouveaux composants. Intéressons-nous maintenant!

Nouveau composant: PDF Viewer

Le nouveau PDF Le composant Viewer est conçu pour permettre à vos utilisateurs de visualiser et d’interagir avec les fichiers PDF directement dans le navigateur! Ce nouveau composant peut être lié initialement à un fichier PDF ou un utilisateur peut même ouvrir un fichier à partir de son ordinateur pour l'afficher dans le composant lui-même. Ils peuvent également télécharger le fichier qu’ils consultent actuellement en un seul clic. L'interface est également entièrement réactive et adaptative, ce qui signifie que vous pouvez ajouter le composant PDF Viewer pour afficher les fichiers PDF sur un périphérique mobile aussi facilement que sur un ordinateur de bureau.

Avec cette version initiale, nous avons également intégré la virtualisation afin de vous aider à parcourir des fichiers PDF plus volumineux. La performance est toujours dans nos esprits après tout ?

Nous voulions également vous permettre de choisir le cadre PDF pour traiter le document, afin que vous puissiez utiliser PDF.js ou travailler avec le Bibliothèque de traitement de documents Telerik pour traiter les fichiers PDF et les visualiser.

Nouveau composant: Tiroir

Un autre nouveau composant est le Kendo UI. Tiroir. Si vous n’êtes pas familiarisé avec un widget de tiroir, c’est cette belle chose qui s’agrandit et s’effondre lorsque vous cliquez sur un bouton ressemblant à un hamburger. Cela se trouve généralement à gauche ou à droite de la page et offre un moyen astucieux de naviguer sans être gênant.

En dehors de la possibilité d'afficher et de masquer le menu, ce qui peut être fait de manière modale. ou en poussant un peu le contenu existant sur le côté, vous avez la possibilité de personnaliser complètement l'apparence de chaque élément de menu. Cela peut être aussi simple que de fournir une simple combinaison de texte et d'icônes via nos propriétés, ou de travailler avec des modèles pour définir votre propre apparence.

Le tiroir propose également un mode "mini" qui vous permet d'afficher le menu mais de ne restituer que les icônes. vous avez choisi, offrant un moyen compact de navigation dans votre application.

Le composant Tableur devient encore meilleur

Avec la version R2 2019, le composant Tableur a reçu certaines des fonctionnalités les plus demandées! Plus précisément, nous avons abordé les éléments suivants:

Support d’image

Vous pouvez maintenant ajouter des images à n’importe quelle cellule. Cela inclut également de les faire glisser autour des cellules pour trouver l’endroit idéal pour vos images. Bien sûr, toute image ajoutée fait partie des fichiers que vous exportez.

Commentaires de cellule

Grâce à la dernière version, vous pouvez désormais laisser vos utilisateurs finaux ajouter des commentaires aux cellules de la feuille de calcul et bien sûr à d'autres éléments. les utilisateurs peuvent consulter ces commentaires lorsqu'ils visitent le même document.

Evénements supplémentaires

Pour vous proposer davantage de moyens de personnaliser le composant Tableur et de l'adapter à vos applications, nous avons étendu les événements exposés dans le composant. Ces événements incluent:

• OnChanging
• OnDataBinding
• OnDataBound
• OnPaste
• OnCut
• OnCopy

Comme vous pouvez le voir, il y a maintenant beaucoup d'occasions d'intervenir et de remplacer beaucoup des valeurs par défaut. Comportements du composant Tableur grâce à ces événements!

Améliorations mobiles et rendus adaptatifs

Pour éviter que nos développeurs ne soient obligés de choisir entre un ordinateur de bureau ou mobile, et de réfléchir plutôt responsive design et Progressive Web Apps (PWA), nous avons mis à jour et amélioré le rendu adaptatif et la prise en charge mobile de trois de nos composants.

The Grid

Normalement, lorsque nous traitons de la conception adaptative dans la grille, nous devons commencer à rechercher les colonnes à afficher ou à masquer, et peut-être condenser le pageur en une liste déroulante ou s quelque chose comme ça.

Cependant, il y a plus que la grille. Filtrer, trier, afficher et masquer les colonnes – tout ce qui nécessite des éléments d’interface utilisateur supplémentaires à gérer. Celles-ci peuvent être délicates à obtenir quelque chose comme un menu contextuel, et regardons les choses en face – les menus contextuels sur mobile peuvent être très mauvais. Ainsi, avec le rendu adaptatif, nous en tenons compte et fournissons une expérience utilisateur alternative pour les interactions avec la grille afin de nous aider réellement à nous adapter à la vue dans laquelle la grille est rendue.

Voici un exemple rapide de ce à quoi cela ressemble quand cliquez ou tapez sur l'en-tête d'une grille.

Découvrez comment nous disposons d'un affichage en liste avec options (trier par ordre croissant) ou décroissant) et vous pouvez plonger plus profondément dans les options de filtre pour une colonne? De même, nous avons des commutateurs disponibles pour chaque colonne afin de basculer la visibilité non seulement pour la colonne actuelle, mais également pour toutes les colonnes disponibles dans la grille.

Je dois mentionner que ce n'est pas le comportement par défaut de la grille – la réactivité régulière reste prise en compte la plupart des exigences. Cependant, cette vue adaptative peut être configurée avec une seule option de configuration pour ceux qui en ont besoin!

The Scheduler

Semblable à la grille, le planificateur est un autre composant qui peut tirer avantage d’une adaptation réelle à sa fenêtre plutôt que de sa réactivité. Ainsi, avec la version R2 2019, nous avons également décidé de nous concentrer sur la vue adaptative du composant Scheduler.

Ci-dessus, nous voyons un rapide coup d'œil à la vue agenda (avec quelques groupements supplémentaires) configurée pour la vue adaptative, en tapotant sur ces éléments pour afficher un formulaire éditable qui occupe tout le port de la vue afin de faciliter la modification dans de plus petites fenêtres.

similaire à la grille, la vue adaptative de l'ordonnanceur est déclenchée par une option de configuration.

DateRangePicker

Le DateRangePicker est abandonné avec la version 2019 et certaines des remarques initiales que nous avons eues sur l'amélioration concernaient la gestion des utilisateurs mobiles. Eh bien, avec R2 2019, nous nous sommes assurés que ce composant gère bien la conception réactive et fonctionne beaucoup mieux sur les appareils mobiles!

ListView obtient un défilement sans fin

Jusqu'à cette version le défilement sans fin dans ListView était l'élément le plus voté dans notre portail de commentaires . Eh bien, je suis heureux de dire que je peux officiellement marquer cet élément comme "terminé" avec la version R2 2019.

Cela signifie que ListView n'a plus besoin d'un pager en bas pour parcourir une longue liste d'éléments. . Faites simplement défiler jusqu'à la fin de votre liste d'éléments actuelle et la page suivante d'éléments sera automatiquement chargée.

Autres Improvemens

Prise en charge de jQuery 3.4.0

C’est facile à couvrir: avec R2 2019, les composants de l’interface utilisateur de Kendo sont officiellement conformes à jQuery 3.4.0, garantissant nous nous tenons au courant des nouveautés les plus récentes du monde jQuery.

Un autre élément attendu depuis longtemps est la possibilité de pouvoir relier des données locales et distantes au menu de l'interface utilisateur Kendo. Eh bien, avec la version R2 2019, nous pouvons enfin associer des données au menu de Kendo UI! Plutôt que de créer manuellement votre menu, vous pouvez maintenant utiliser une source de données pour vous connecter à des données distantes et remplir le menu en fonction de vos propres données.

Ceci et bien plus dans notre webinaire

Si vous voulez voir ce que nous avons évoqué ici en action, alors vous devriez vous joindre moi-même et mes collègues du "Developer Advocate" pour à notre webinaire en direct sur le Kendo UI le jeudi 6 juin à 11h00 HE! Nous avons un nombre de places limité pour ce webinaire, alors assurez-vous de ne pas vous arrêter et inscrivez-vous pour réserver votre place aujourd'hui!