Quoi de neuf pour jQuery dans la version R3 2018 de l'interface utilisateur Kendo

Jetez un coup d'œil à certains changements apportés à la version R3 2018 de l'interface utilisateur Kendo pour jQuery, y compris la conformité WCAG 2.1, les nouveaux composants et bien plus encore.

Vous avez probablement déjà vu le résumé J'ai fourni dans l'aperçu du blog autour de l'interface utilisateur Kendo pour R3 2018, mais je voulais examiner plus en détail ce qui est nouveau pour les composants de jQuery UI avec cette nouvelle version passionnante.

Première bibliothèque de l'interface utilisateur avec la conformité WCAG 2.1

L'un des points forts de cette publication est le support officiel de WCAG 2.1 . Cela fait du Kendo UI la première bibliothèque d'interface commerciale à prendre en charge cette nouvelle norme d'accessibilité.

Pourquoi est-ce important pour moi? Eh bien, l'accessibilité a été une grande partie de l'interface utilisateur Kendo, et de tous nos composants Web, depuis le tout début. Nous n'avons pas vu de mise à jour de ces normes depuis lors, il est donc toujours intéressant de voir des améliorations à la norme. La norme WCAG est passée de 2,0 à 2,1 en juin. Voici un aperçu des nouveautés mais la version courte est que cette norme se concentre sur quelques domaines d'amélioration par rapport à la version 2.0, y compris l'accessibilité mobile et les normes améliorées pour les personnes malvoyantes. troubles d'apprentissage.

La meilleure partie est que tout cela est pris en charge par défaut. En tant que développeur, il vous suffit d'ajouter un widget d'interface utilisateur Kendo ou de mettre à niveau vos références existantes, et vous serez en mesure de tirer parti de cette conformité à l'accessibilité.

Nouveaux composants jQuery

Ne soyez pas une version remarquable sans mentionner certains de nos nouveaux composants. Je suis heureux de dire qu'avec R3 2018, nous avons livré l'élément de rétroaction le plus populaire pour l'interface Kendo: une liste déroulante avec une structure de table pour chaque élément.

Présentation de MultiColumnComboBox

la version R3 2018 nous avons maintenant officiellement un composant ComboBox qui fournit une grille pour afficher des valeurs de données supplémentaires pour chaque élément individuel.

La puissance vient de les fonctionnalités qui proviennent d'un ComboBox, y compris:

• Filtrage sur serveur
• Virtualisation
• Regroupement
• Modèles
• Navigation sur le clavier
• MultiColumnComboBox en cascade

, toutes ces fonctionnalités sont déjà disponibles dans ce composant, donc pas besoin d’attendre un tas de fonctionnalités à ajouter, c’est vraiment un composant prêt à l’action immédiatement.

Visualisation des données – Ajout de la jauge d’arc [19659021] Nous recevons constamment des commentaires et des demandes concernant nos composants de visualisation de données, et les jauges ne font certainement pas exception. Pour satisfaire votre appétit pour plus de visuels, nous avons ajouté un composant tout nouveau, l'ArcGauge . Ce widget vous offre un moyen simple et élégant d’afficher une valeur ou un pourcentage d’une valeur sans gonflement supplémentaire. Juste une belle forme d'arc et quelques valeurs.

Mises à jour des composants existants

Mises à jour majeures de TreeList

Le composant TreeList est le composant parfait les données que vous voulez afficher de manière hiérarchique avec la condition supplémentaire d'avoir une structure de colonne comme vous le voyez habituellement dans une grille / table.

Cela signifie que bien qu'il existe de nombreuses fonctionnalités uniques dans un tel composant, nous avons également Un grand nombre de demandes pour avoir des fonctionnalités que nous voyons dans la grille sont disponibles dans ce composant.Avec R3 2018, nous avons ajouté certaines des fonctionnalités les plus demandées de ce composant qui viennent de la fonctionnalité Grid.

En-têtes multi-colonnes [19659028] treelist-multi-column-headers "title =" 003-treelist-multi-column-headers "/>

Parfois, un seul en-tête par colonne ne suffit pas, surtout lorsque vous souhaitez regrouper les en-têtes. Avec les en-têtes à plusieurs colonnes vous pouvez définir des en-têtes globaux pour plusieurs colonnes.

Pagination côté client

exclusivement du côté client, comme lorsque toutes les données ont été chargées sur le client, la pagination côté client a été ajoutée pour améliorer les performances et le rendu avec davantage d'applications gourmandes en données.

Modification par lots / InCell

Comme son nom l'indique l'édition InCell (ou Batch comme on l'appelle aussi) permet de terminer -users pour éditer des cellules individuelles plutôt que la ligne entière. Les mises à jour peuvent ensuite être regroupées et envoyées sous forme de requête unique au serveur.

Navigation au clavier

Assez explicite, mais nous avons maintenant officiellement ajouté le support complet au composant TreeList.

Améliorations apportées aux composants de la grille et à l'interface utilisateur conversationnelle

La grille est le composant le plus utilisé de la suite. Je souhaite donc mentionner les fonctionnalités ajoutées ici.

Les résumés de groupes sont désormais disponibles dans les en-têtes de groupe

Jusqu'à présent, les résumés de groupes étaient exclusivement relégués aux bas de page de groupe d'une grille. Maintenant, avec R3 2018, nous avons officiellement ajouté le même type de résumé aux en-têtes de groupes, ce qui était possible auparavant, mais uniquement à l'aide de CSS et HTML personnalisés dans les modèles.

Mises à jour des comportements réactifs [19659044] grille-responsive-comportements "title =" 007-g rid-responsive-comportements "/>

Alors que nous continuons à examiner comment nous pouvons améliorer notre support pour les applications Web progressives, nous voulions ajouter des fonctionnalités supplémentaires à la grille. Pour ce faire, nous avons maintenant une propriété media pour chaque colonne d'une grille. Cela attend une chaîne de correspondances valide afin de contrôler le moment où afficher ou masquer une colonne en fonction de la taille de la fenêtre disponible.

API ajoutée: mise à jour de la largeur de colonne par programme

a été défini, un nouveau rendu de la grille serait nécessaire pour mettre à jour les largeurs de colonne. Avec R3 2018, nous avons introduit une mise à jour de l'API tant attendue qui vous permet de redéfinir la largeur d'une colonne par programmation après le rendu de la grille.

Mises à jour de l'interface utilisateur

Très enthousiasmé par notre composant Interface utilisateur de conversation nous avons donc mis du temps à ajouter une fonctionnalité très attendue: la possibilité d'ajouter une barre d'outils personnalisée à votre discussion. Cela offre aux utilisateurs des moyens supplémentaires d’interagir avec votre chat, notamment en ajoutant des images et des enregistrements vocaux. Ceci est bien sûr quelque chose que nous proposons un modèle, de sorte que vous pouvez le personnaliser encore plus pour répondre à vos besoins.

Autre Faits saillants des composants

Intégration GraphQL

Il est impossible d’échapper à l’excitation autour de GraphQL . Bien que cela ne soit pas applicable à tous les projets, il a certainement des scénarios très pertinents. Nous avons entendu cela au sein de notre clientèle existante, raison pour laquelle nous avons créé des ressources autour de reliant les composants de l'interface utilisateur Kendo à GraphQL .

L'exemple le plus simple serait le lier la grille à la démo GraphQL car la grille est souvent utilisée dans les scénarios de liaison de données et nous permet de voir comment la source de données peut être utilisée pour communiquer avec GraphQL.

récemment blogué à propos de la liaison du Kendo U Je grille vers une API GraphQL qui va encore plus loin.

Restreindre les mouvements de la fenêtre

Un élément de rétroaction assez populaire pour le composant Window consiste à restreindre le mouvement à une zone particulière plutôt qu'à la fenêtre entière du navigateur. Eh bien, avec R3 2018 nous avons ajouté cette fonctionnalité et pour voir cela en action, vous pouvez vous référer à la démo du mouvement de contrainte de fenêtre de Kendo UI .

Étiquettes de graphique

Les composants existants sont une mise à jour de notre bibliothèque graphique. Les gens ont eu du mal à gérer les étiquettes dans un graphique lorsque des valeurs positives et négatives sont affichées. Plutôt que d'essayer de le décrire, je pense qu'il est plus facile de voir à travers les images.

Une manière plus propre d'afficher ceci serait de contrôler exactement où les étiquettes sont affichées, et avec l'option categoryAxis position de l'étiquette et l'option valueAxis label position cela peut être facilement réalisé!

Beaucoup plus propre si vous me le demandez!

Le thème des matériaux vient à jQuery

Nous espérions d'abord ajouter le thème Material à jQuery avec la dernière version, mais nous avions besoin de plus de temps pour bien faire les choses. Eh bien, nous avons pris ce temps et maintenant nous pouvons dire que les composants jQuery supportent officiellement Material Design!

Support AngularJS 1.7.x ] Il existe de nombreuses applications créées avec AngularJS 1.x, ou du moins gérées avec. Il s’agit de quelque chose qui n’a pas dépassé Google et qui, au cours de l’été, publie Angular 1.7.x, qui est le dernier publication importante d'AngularJS Afin de garantir que tous ceux qui utilisent l'interface utilisateur de Kendo dans AngularJS puissent travailler avec les plus récents dans ce cadre, l'interface utilisateur de Kendo prend désormais officiellement en charge AngularJS 1.7.x Les composants jQuery, c'est pourquoi je le mentionne ici. Voulez-vous travailler avec Angular (2+)? Nous avons des composants natifs construits à partir de la base au cas où vous seriez intéressé

Nous voulons entendre parler de vous!

Beaucoup de ces fonctionnalités n'ont peut-être pas été ajoutées si ce n'était pas pour le fait que nous entendions nos développeurs. Donc, si vous sentez que nous avons manqué de nouveaux composants ou des fonctionnalités, faites entendre votre voix! Ajouter un commentaire dans la section commentaire ci-dessous, ou soumettre vos commentaires à notre notre portail de commentaires .

Vous voulez voir les mises à jour en action?

Dernière chose, je vous le promets. Cet article de blog a peut-être été très compliqué et si vous préférez que les choses soient couvertes en direct, j'ai de bonnes nouvelles! Dans le cadre de la sortie du R3 2018, nous avons le Webinaire Kendo UI LIVE qui se tiendra le 27 septembre à 11 h HE! webinaire en direct où nous allons passer en revue les modifications introduites avec R3 2018. Il y a des places limitées, alors assurez-vous de réserver le vôtre dès que possible!

Save My Seat