Nouveautés de R2 2019 pour Kendo UI

La version R2 2019 de Kendo UI est arrivée! Ceci apporte une liste énorme de nouveaux composants et fonctionnalités répartis dans nos bibliothèques natives pour jQuery, Angular, React et Vue.

La version R2 2019 du bundle Kendo UI est disponible et elle regorge de nouveautés composants et fonctionnalités. Que vous souhaitiez développer avec jQuery, Angular, React ou Vue, de nombreuses nouveautés sont à découvrir qui devraient vous passionner!

Comme d'habitude, cet article de blog servira de résumé général de chaque personne. La saveur JavaScript et ses mises à jour, ainsi que des liens vers des pages plus détaillées couvrant en profondeur les nouvelles fonctionnalités de votre bibliothèque JS préférée.

jQuery

Nouveaux composants

R2 2019 introduit deux nouveaux composants dans le Kendo. UI Liste des composants de l'interface utilisateur jQuery: le visualiseur PDF et les widgets tiroir

Visualiseur PDF

Le visualiseur PDF est conçu pour vous permettre d'héberger des fichiers PDF dans vos applications sans obliger les utilisateurs à télécharger le PDF au préalable sur leur ordinateur local. Le composant peut fonctionner avec PDF.js et la bibliothèque de traitement de documents Telerik pour traiter à la fois les fichiers PDF à visualiser et à exporter. De plus, nous avons lancé la première version avec une fonctionnalité exceptionnelle et ajouté la virtualisation, afin de nous assurer que même les fichiers PDF les plus volumineux puissent être affichés dans le composant.

Drawer

Le widget tiroir a plus ou moins été repris en tant que l’élément de navigation de facto pour les applications Web, c’est pourquoi nous avons voulu introduire ce widget dans Kendo UI. Le tiroir peut être superposé au contenu existant ou déplacé vers le côté.

Les éléments du tiroir constituent également votre combinaison standard d'icônes et de texte, mais peuvent être entièrement personnalisés pour disposer de leurs propres modèles de présentation. Le composant Tiroir offre également la possibilité d’afficher une présentation plus compacte, appelée mode «mini», qui affiche uniquement les icônes de chaque élément de menu.

Nouvelles fonctionnalités des composants existants

Au-delà des nouveaux composants, nous avons une tonne de fonctionnalités ajoutées à nos composants existants.

Améliorations apportées à la feuille de calcul

Le widget Feuille de calcul est un widget très important dans le jeu de composants de l'interface de Kendo, et avec R2 2019, il recevait les fonctionnalités les plus demandées, notamment:

• Prise en charge des images – Les images peuvent maintenant être ajoutées, ainsi que glissées entre toutes les cellules de la feuille de calcul. Toutes les images ajoutées feront également partie des documents exportés.
• Commentaires de cellule – Les utilisateurs finaux peuvent désormais ajouter des commentaires à n’importe quelle cellule et, bien entendu, si vous avez lié la feuille de calcul à un point de fin des données, ils peuvent également voir les autres commentaires ajoutés.
• Événements – Nous avons élargi l'ensemble des événements disponibles dans le tableur pour inclure Changing DataBinding DataBound . , Paste Cut Copy événements. Cela devrait vous donner de nombreux crochets pour personnaliser le widget Feuille de calcul en fonction de vos besoins spécifiques.

Scrolling ListView Endless

Permettre aux utilisateurs de faire défiler de grands ensembles de données sans avoir un pager en bas est une fonctionnalité très demandée dans tous les environnements. nos composants liés aux données. ListView n'échappe pas à cette règle et avec R2 2019, nous avons ajouté le défilement infini en tant que fonctionnalité dans ListView, ce qui répond au plus de votes dans notre portail de commentaires!

Mobile & Adaptive Rendering

expérience mobile sur quelques composants, notamment l'extension du comportement adaptatif de la grille et du planificateur.

Qu'est-ce qu'un comportement adaptatif? Eh bien, cela nous donne une meilleure expérience utilisateur pour des composants plus avancés où il ne suffit pas d’adapter les composants à l’écran. Cela signifie créer un écran séparé pour les paramètres de colonne, filtrer et trier avec la grille ou créer des écrans distincts pour l'édition à la fois dans la grille et dans le planificateur.

Nous avons également amélioré la prise en charge mobile de DateRangePicker . garantissant que ce composant fonctionnera correctement sur les ordinateurs de bureau comme sur les appareils mobiles.

Liaison des données de menu

Le menu de l'interface de Kendo a toujours échappé à la possibilité que des données soient utilisées pour peupler ses éléments. Eh bien, pas plus! Avec R2 2019, nous avons ajouté la possibilité de travailler avec la source de données avec le composant Menu, offrant ainsi la possibilité qu’un point de terminaison de données distant puisse être chargé de renseigner le menu pour nous.

jQuery 3.4.0 Support

jQuery La version 3.4.0 a été publiée récemment et nous avons pu nous assurer que la compatibilité R2 2019 est tout à fait compatible. Donc, pour ceux d'entre vous qui envisagent de travailler avec les technologies les plus récentes et les plus performantes du monde jQuery, je suis heureux de dire que nous soutenons pleinement jQuery 3.4.0 avec la dernière version de Kendo UI!

Découvrez en profondeur R2. 2019 pour jQuery

Pour une analyse plus détaillée des autres fonctionnalités ajoutées à jQuery, y compris de meilleures descriptions de ces fonctionnalités ainsi que des liens vers de la documentation et des exemples, je vous recommande de vous reporter au Nouveautés de R2 2019 pour l'article de blog jQuery Kendo UI Components .

Angular

Nouveaux composants

Outre les suspects habituels tels que Grid et DropDowns, Kendo UI pour Angular contient de gros composants puissants, comme le planificateur et l'éditeur. . Celles-ci requièrent beaucoup de notre attention pour être intégrées aux heures de grande écoute; par conséquent, la majeure partie de ce que nous avons réalisé pour R2 2019 a été axée sur ces composants. Néanmoins, nous avons également pu ajouter un nouveau composant avec la version R2 2019.

ColorPicker

Angular ColorPicker vous permet de fournir un widget déroulant ou un widget développé permettant aux utilisateurs de sélectionner des couleurs dans vos applications Angular. Pour ce faire, vos utilisateurs peuvent choisir une palette de couleurs prédéfinie ou un dégradé offrant plus de souplesse pour choisir une couleur spécifique.

Nouvelles fonctionnalités des composants existants

Améliorations apportées au planificateur

Le planificateur a Nous sommes au centre de nos préoccupations depuis quelques versions maintenant, et avec raison. C'est l'un des composants les plus utilisés et nous recevons une tonne de commentaires de la part des développeurs travaillant avec le composant. Bien que nous ayons encore quelques fonctionnalités à aborder avant de rattraper nos autres ordonnanceurs basés sur le Web, nous avons pu ajouter les fonctionnalités suivantes avec R2 2019:

• Redimensionnement des événements – Vous pouvez maintenant modifier les événements en les redimensionnant. en capturant le haut et le bas de l’événement et en agrandissant ou en réduisant les événements.
• Événements de glisser-déposer – Comme dans ce qui précède, le glisser-déposer d’événements nous permet de modifier des événements par le biais d’interactions de la souris. Les utilisateurs peuvent maintenant faire glisser un événement vers un jour ou une heure différents pour le mettre à jour quand il se produit.
• Vues sur plusieurs jours et sur la semaine de travail – Nous avons eu quelques vues différentes du planificateur angulaire depuis un certain temps, avec Dans la dernière version, vous pouvez personnaliser le nombre de jours que vous souhaitez voir dans une seule vue. Vous pouvez également sélectionner une vue de la semaine de travail.
• Exporter au format PDF – Le contenu du planificateur peut désormais être exporté au format PDF en un seul clic!
• Heure actuelle – Lorsqu'un utilisateur clique sur le bouton «Aujourd'hui» dans le planificateur, il est automatiquement placé le jour en cours et un indicateur d'heure s'affiche sous la forme d'une ligne sur le planificateur.

Améliorations de l'éditeur

L'éditeur est l'un des derniers composants d'interface utilisateur angulaire que nous proposons à partir de Kendo UI. Comme il est nouveau et qu’un éditeur de texte enrichi doit couvrir un grand nombre de scénarios, de nombreuses fonctionnalités doivent être ajoutées au composant. Avec cette version, nous avons couvert la plupart des bases, y compris les outils suivants qui ont été ajoutés aux options disponibles de la barre d'outils:

• La liste déroulante Format présente différents formats
• Boîte de dialogue Insérer une image
• Boîte de dialogue Insérer un fichier
• & Superscript
• Onglet HTML
• Sélecteur de polices et sélecteur de taille de police
• Texte pour aligner et justifier le contenu
• Bouton Effacer le formatage
• Localisation
• Support de droite à gauche (RTL)

Ceci est juste la pointe de l'iceberg pour ce qui va arriver dans l'éditeur angulaire de Kendo UI, alors gardez un œil sur les mises à jour de la feuille de route pour voir ce qui s'en suivra!

Améliorations Drop Down

The Drop Downs dans son ensemble (pas seulement DropDownList, par exemple) ont reçu deux nouvelles fonctionnalités majeures qui sont assez grandes si vous me le demandez.

• La virtualisation (bientôt) – Tout comme la grille et d’autres composants basés sur des listes, le les listes déroulantes auront souvent des tonnes de données qui leur sont envoyées. La virtualisation permet aux utilisateurs de faire défiler des tonnes de données tout en conservant une expérience de défilement fluide. A partir de l'annonce d'aujourd'hui, la fonctionnalité n'est pas encore prête, mais je souhaite la mentionner ici pour que tout le monde sache que nous ne serons plus qu'à une semaine de l'ajout de cette option dans la liste déroulante.
• Grouping – L'organisation de grandes listes n'est pas chose facile, et l'une des approches que nous adoptons consiste à regrouper les données sur un champ particulier afin de faciliter la navigation.

Support WCAG 2.1

L'accessibilité est: toujours important et un pilier pour tout produit Kendo UI, et Angular ne fait pas exception. Avec R2 2019, nous introduisons de la documentation et des directives sur la manière de garantir la conformité aux normes WCAG 2.1 lors de l’utilisation des composants angulaires de Kendo UI. Comme nos composants d'interface utilisateur sont assez avancés, il est toujours nécessaire de déterminer quelles fonctionnalités rendent quelque chose plus ou moins accessible. Ce guide devrait donc vous aider à naviguer dans ces eaux!

Découvrez R2 2019 pour Angular

Pour plus de détails Examinez les mises à jour que nous avons effectuées du côté angulaire. Consultez l'article de blog Nouveautés de Angular pour R2 2019 ici .

Réagissez

Nouveaux composants

Réagissez, en tant que l'un des Les bibliothèques les plus récentes que nous proposons se lancent dans la mise en œuvre d'une multitude de nouveaux composants et fonctionnalités afin de rattraper les autres bibliothèques de composants de l'interface utilisateur. Pour R2 2019, nous avons introduit une tonne de nouveaux widgets et fonctionnalités d'interface utilisateur dans les composants d'interface utilisateur existants!

Editeur

Avec R2 2019, nous avons ajouté la première version de notre éditeur de texte enrichi, offrant ainsi aux développeurs de React la possibilité d'ajouter davantage insérez du texte dans leurs formulaires et leurs applications globales.

DateTimePicker

Le DateTimePicker fournit un seul élément d'entrée permettant de sélectionner une date et un créneau horaire. L’UX général est plutôt simple, car vous disposez d’un calendrier pour sélectionner la date et d’un sélecteur de temps qui ressemble à de nombreux sélecteurs de temps mobiles que vous utilisez peut-être déjà aujourd’hui. Bien entendu, en tant que développeur, vous pouvez facilement extraire l’objet de date JavaScript de ce composant pour le sauvegarder en toute sécurité.

Notification

Il est bien d’avoir le widget de notification lorsque vous souhaitez ajouter de la torche UX supplémentaire dans votre application. Qu'il s'agisse d'une fenêtre contextuelle qui apparaît lorsque l'utilisateur a fait quelque chose de bien (inscription réussie) ou en cas d'erreur (message d'erreur), la notification permet de le placer facilement au centre de l'attention des utilisateurs. Nous avons certains types de notification prédéfinis, success échec warning mais vous pouvez également personnaliser entièrement l'apparence de vos notifications.

Curseur

19659008] Le widget curseur est une nouveauté pour R2 2019 également et offre un moyen intuitif de sélectionner une valeur particulière dans une plage prédéfinie. Les utilisateurs peuvent faire glisser un petit indicateur de gauche à droite pour sélectionner la valeur parfaite – bien mieux qu’une entrée classique ou une liste déroulante contenant toutes les valeurs disponibles.

Sortable

L’équipe de KendoReact utilise quelques éléments de cadre internes que nous utilisons. pour certains de nos composants et nous réalisons souvent que nous devrions les proposer en tant que packages autonomes pour permettre aux autres développeurs de les exploiter. Sortable est l'un de ces paquets. Cela offre aux utilisateurs finaux la possibilité de réorganiser les listes d'éléments HTML en faisant glisser les composants, les données sous-jacentes étant mises à jour au fur et à mesure.

Draggable

Le composant Draggable est dans la même veine que Sortable. composant ci-dessus: quelque chose que nous souhaitons que tous les développeurs de React puissent utiliser plutôt que quelque chose que nous accumulons pour nous-mêmes et les composants de l'interface utilisateur de KendoReact. Draggable est une bibliothèque d’utilitaires génériques qui facilite le déplacement d’éléments HTML génériques et le contrôle des emplacements où ils peuvent être glissés et déposés.

Nouvelles fonctionnalités des composants existants

Améliorations de la grille

La plupart des versions sont livrées avec une mise à jour. honnêtement, mais entre janvier et mai, nous avons ajouté une énorme fonctionnalité sous la forme de virtualisation de colonne, renforçant ainsi la grille KendoReact en tant que l’une des grilles de données les plus rapides et les plus riches en fonctionnalités de React.

• Virtualisation de colonnes – La grille KendoReact est déjà l'une des grilles de données les plus rapides disponibles pour les développeurs de React et en introduisant la virtualisation de colonnes, nous continuons à être à la pointe de la performance. Avec la dernière édition, Grid prend désormais en charge la virtualisation des colonnes des colonnes et .
• Menu contextuel – Souvent, nous souhaitons proposer des options supplémentaires pour chaque élément de données. dans la grille, et c’est là que le menu contextuel entre en jeu. Désormais, un utilisateur peut cliquer avec le bouton droit de la souris sur n’importe quelle ligne de la grille KendoReact et faire apparaître des options supplémentaires. Bien sûr, en tant que développeur, vous avez le plein contrôle sur ce qui apparaît dans ledit menu.

Améliorations de TreeView

TreeView a également reçu certaines des fonctionnalités les plus demandées, notamment le glisser-déposer et la sélection de cases à cocher.

• Faire glisser & drop – Les utilisateurs finaux peuvent maintenant prendre n’importe quel nœud dans TreeView et le faire glisser pour le réorganiser afin de réorganiser la structure TreeView. Ceci fonctionne pour les noeuds feuille ainsi que pour les noeuds avec enfants.
• Sélection de case à cocher – Grâce à une seule option de configuration, vous pouvez désormais sélectionner une case à cocher sur tout le TreeView, les valeurs sélectionnées pouvant être extraites ou définies facilement. L'API de la TreeView.

Découvrez en détail R2 2019 pour React

Vous ne pouvez pas obtenir assez de ce que nous faisons avec React? Rendez-vous à l'article de blog "Quoi de neuf dans KendoReact for R2 2019 où je décris plus en détail tous les nouveaux composants et fonctionnalités faisant partie de R2 2019!

Vue

Native Data Grid

La grille native de Kendo UI pour Vue.js a fait l’objet de beaucoup d’attention au cours des derniers mois.

• Regroupement et virtualisation – La virtualisation peut désormais être utilisée conjointement avec le regroupement, ce qui signifie qu’il limitations plus longues pour l'utilisation de groupes avec la virtualisation.
• Colonnes gelées / verrouillées – Les colonnes gelées ou verrouillées offrent un moyen astucieux de s'assurer qu'une colonne est affichée en permanence lorsque vous faites défiler vos colonnes. Une colonne ne doit pas toujours être gelée et vous pouvez configurer des colonnes pour ne les verrouiller qu'après leur défilement.
• Menu de colonnes de grille – Il est souvent nécessaire de pouvoir fournir plus d'options pour interagir avec les colonnes. pour toute implémentation de grille. Avec la fonctionnalité de menu de colonnes, les développeurs peuvent désormais configurer un menu par défaut, ou un menu personnalisé, pour interagir avec des fonctionnalités telles que le filtrage, le tri, l'affichage et le masquage de colonnes, le tout dans un menu qui apparaît lorsque vous cliquez sur les en-têtes de la grille. 19659089] Nouvelles fonctionnalités dans les composants existants

  ListView Endless Scrolling

  Avoir un pager au bas d'une liste de liaisons de données est parfois loin d'être idéal en fonction des besoins des utilisateurs – les utilisateurs finaux souhaiteraient simplement voir une barre de défilement. C'est ici qu'intervient Endless Scrolling, car il offre à vos utilisateurs un moyen de faire défiler toutes vos données sans afficher de pageur. En tant que développeur, vous bénéficiez d'une multitude d'avantages en chargeant des pages de données plutôt que de toutes les données en même temps.

  Regardez plus en détail R2 2019 pour Vue.js

  Vous voulez en savoir plus sur ce que nous avons fait pour Vue.js avec R2 2019? Rendez-vous sur le Nouveautés de la R2 2019 pour l'article de blog Vue.js pour plus de détails.

  M'inscrire au (x) webinaire (s)

  Normalement, c'est la section où je l'ajoute quelques détails sur un webinaire à venir. Cependant, dans le post d'aujourd'hui, j'ai de bonnes nouvelles en ce que nous avons deux webinaires auxquels vous pouvez vous inscrire.

  Le premier webinaire que je souhaite mettre en avant est le Webinaire en direct de Kendo UI . , qui aura lieu le jeudi 6 juin à 11h00 HE! Rejoignez mes collègues de l'équipe de Developer Advocate et moi-même pour couvrir ce que j'ai évoqué dans ce billet de blog et le billet plus détaillé, dans un format de webinaire en direct.

  Inscrivez-vous au webinaire sur le Kendo UI

  Le deuxième webinaire que je souhaite aborder est le webinaire spécifique à KendoReact destiné aux personnes intéressées par React. Ceci se produit le mardi 4 juin à 11 h 00 (heure de l'Est) et vous pouvez réserver vos places pour le webinaire en direct R2 2019 KendoReact ici .

  Inscrivez-vous au webinaire KendoReact en ligne ]

  Pour les deux webinaires, le nombre de places est limité, alors passez à l'un des liens (ou aux deux!) Que j'ai posté ici pour réserver votre place aujourd'hui.

  ---