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

La version R1 2020 des composants jQuery de l'interface utilisateur de Kendo est arrivée et apporte les nouveaux composants du gestionnaire de fichiers, du badge et de la mie de pain ainsi que la virtualisation des colonnes de la grille et les améliorations de l'éditeur.

Le début de l'année est là, et cela signifie que R1 2020 est également à nos portes! Cette version est livrée avec une tonne de nouveaux composants, et certaines des fonctionnalités les plus demandées dans les composants existants, alors allons-y directement et voyons ce qui est nouveau pour Kendo UI pour jQuery dans R1 2020!

Nouveaux composants

Nouveau composant: Breadcrumb

Le nouveau Le composant jQuery Breadcrumb de Kendo UI offre aux développeurs une interface simple et intuitive pour se déplacer à travers différents niveaux de hiérarchie de navigation. Souvent très lourd dans les pages de documentation, un fil d'Ariane peut être utilisé dans à peu près n'importe quel site Web pour aider les utilisateurs à naviguer dans une hiérarchie de pages Web.

Voir le composant Breadcrumb en action d'ici en se dirigeant vers la démo Kendo UI Breadcrumb page .

Nouveau composant: Badge

Popularisé par des icônes sur les appareils mobiles pour indiquer des messages ou des notifications non lus, le composant de badge a trouvé plusieurs utilisations dans le monde Web général. Avec le nouveau widget Kendo UI Badge, les développeurs peuvent ajouter des badges aux composants Kendo UI existants, leurs propres éléments UI et même afficher le badge lui-même pour fournir des informations contextuelles supplémentaires à quelque chose sur la page.

Pour des exemples et un peu de une plongée plus profonde, passez à la page de démonstration de l'insigne d'interface utilisateur de Kendo!

Nouveau composant: Gestionnaire de fichiers

L'un des composants les plus demandés au fil des ans, le le nouveau composant Kendo UI File Manager permet aux utilisateurs finaux de parcourir les dossiers et les fichiers, similaires aux fonctionnalités de l'Explorateur Windows, pour aider à gérer le stockage des fichiers dans leurs applications Web. Cela peut être utilisé conjointement avec des composants comme l'Éditeur pour sélectionner des images ou utilisé en tant que composant autonome pour aider les utilisateurs à télécharger, télécharger et organiser des fichiers ou des dossiers.

Il y a beaucoup de choses dans ce composant, donc pour un examen plus approfondi Pour savoir comment tout cela fonctionne vous pouvez vous référer à la page de démonstration du gestionnaire de fichiers de l'interface utilisateur de Kendo . désactivé) en utilisant l'un des thèmes de l'interface utilisateur de Kendo, par défaut  » title= »Kendo UI for jQuery’s Checkbox Styling »/>

Bien que nous ayons des styles disponibles pour les cases à cocher et les boutons radio depuis un certain temps, notre approche a été un peu opiniâtre et pas extrêmement flexible. Cela vient principalement de la nécessité de prendre en charge le style dans les anciens navigateurs et d'assurer la compatibilité entre les navigateurs. Cependant, depuis lors, bon nombre de ces anciens navigateurs ont cessé d'être utilisés. Par conséquent, avec R1 2020, nous avons décidé de réévaluer la façon dont nous stylisons ces deux éléments d'entrée et avons maintenant introduit une approche plus moderne pour styliser ces composants.

Cela ne s'applique pas seulement à leur apparence, mais également à la façon dont vous pouvez les mettre en œuvre. Traditionnellement, nous avions besoin d'une balise immédiatement suivie d'une balise :

Avec le nouveau style, l'ordre n'a pas d'importance (l'étiquette peut précéder l'entrée ), vous pouvez envelopper la case à cocher entière dans une étiquette, et vous pouvez même ignorer l'étiquette si vos besoins l'exigent! Pour plus d'informations rendez-vous sur cet article de documentation pour voir les cases à cocher et les boutons radio en action.

Grille – Virtualisation des colonnes

La nouvelle fonctionnalité de virtualisation des colonnes de la grille jQuery de l'interface utilisateur de Kendo permet aux utilisateurs de faire défiler en douceur les ensembles de données avec de nombreuses colonnes sans avoir d'impact sur les performances de rendu d'une grande quantité de code HTML supplémentaire, ce qui était le cas auparavant. Grâce au recyclage des éléments HTML et des cellules de la grille, les utilisateurs peuvent désormais faire défiler horizontalement toute la collection de colonnes sans aucun problème de performances.

Bien qu'un GIF animé puisse certainement aider à montrer les améliorations de performances impressionnantes que cela peut fournir, une démo vaut la peine mille mots (c'est un dicton commun, non?). Consultez les démonstrations de virtualisation des colonnes et des liens vers plus de documentation ici .

Liste arborescente – Panneau de recherche

La nouvelle fonctionnalité du panneau de recherche dans la Kendo UI TreeList fournit aux utilisateurs un moyen rapide de filtrer le contenu de la TreeList avec une seule entrée de texte dans la barre d'outils supérieure de la TreeList. La façon dont ces filtres et les champs à travers les données finissent par être des filtres peuvent être configurés avec juste un ensemble rapide d'options de configuration – garantissant que toute recherche répond aux exigences de vos utilisateurs.

Passez à TreeList Démonstration du panneau de recherche pour voir à quel point il est facile d'implémenter cela dans votre TreeList aujourd'hui!

Éditeur – Outil de fusion de tableaux

Grâce au nouvel outil de fusion de tableaux pour l'éditeur Kendo UI Editor, les utilisateurs finaux peuvent facilement créer et mettre à jour la disposition de tout élément de tableau dans le contenu de l'éditeur. Cela permet des interactions telles que la fusion de deux cellules l'une à côté de l'autre, ou même leur fusion dans des cellules au sein d'une colonne, le tout via une seule interface de barre d'outils.

Une démonstration du nouvel outil Merge Table peut être trouvée ici .

Editeur – Format Painter Tool

Le format Painter est un outil standard dans de nombreux éditeurs de texte enrichi. Cette fonctionnalité permet aux utilisateurs de sélectionner une section de texte pour copier la mise en forme (police, taille, couleur, etc.) et de l'appliquer à une autre section du contenu. Avec R1 2020, l'éditeur de jQuery de l'interface utilisateur de Kendo dispose désormais d'un support intégré pour cette fonctionnalité exposée dans sa collection d'options d'outils par défaut.

Pour jouer avec l'outil Format Painter, passez à cette démonstration.

Scheduler – Auto-Sizing & Adaptive Height of Events

La nouvelle auto – la fonction de dimensionnement des événements dans le planificateur d'interface utilisateur de Kendo permet d'afficher des hauteurs variables sur divers événements et jours. Cela signifie que les jours avec de nombreux événements et les événements contenant des informations supplémentaires finissent par être de taille différente des jours sans événements affichés.

Dans le même ordre d'idées, la nouvelle fonction Adaptive Slot Height du programmateur permet aux emplacements de la vue mensuelle du Planificateur s’adapte automatiquement au nombre d’événements à afficher au cours d’une journée particulière.

Filtre – Fonction de filtre personnalisé

Le composant de filtre Kendo UI a reçu toute une série de nouvelles fonctionnalités, y compris la possibilité de créer des fonctions de filtre personnalisées . Cela permet aux développeurs de créer leur propre opération de filtrage personnalisée (par exemple, tous les produits avec un nombre pair d'unités en stock) en dehors de ce que le composant Filtre a par défaut – donnant un niveau de personnalisation approfondi à ce composant déjà puissant.

Filtre – Opérateurs personnalisés par champ

Par défaut, le composant Filtre de l'interface utilisateur de Kendo propose tous les opérateurs de filtre (égaux, différents, contient, etc.) sur chaque champ. Avec la nouvelle fonctionnalité d'opérateurs personnalisés permet désormais aux développeurs de prédéfinir une liste explicite d'opérateurs disponibles. Cela donne un autre niveau de personnalisation au composant Filtre car chaque champ peut désormais avoir un ensemble unique d'opérateurs qui ont du sens uniquement pour ce champ.

Filtre – Aperçu de l'expression du format

Avec la fonction Aperçu de l'expression du format, le composant Kendo UI Filter permet désormais aux utilisateurs de configurer une chaîne de format à utiliser sur toute expression de filtre générée par le composant Filter. Ceci est particulièrement important pour les chaînes comme les dates qui peuvent être formatées de multiples façons. Maintenant, la création d'un format pour chaque champ est aussi simple que la définition de l'option de configuration du format.

Chronologie – Prise en charge de la source de données partagée

Le composant Timeline de l'interface utilisateur de Kendo est désormais en mesure de partager une source de données avec n'importe quelle autre liaison de données Composant d'interface utilisateur de Kendo sans qu'aucune solution de contournement ou demande supplémentaire ne se produise. Parfait pour les scénarios où une timeline est liée à un ensemble de données commun avec une grille d'interface utilisateur Kendo, ou tout autre composant qui représente l'ensemble de données sous-jacent.

Avez-vous des commentaires?

Avez-vous aimé quelque chose que nous avons sorti avec R1 2020? Vous manquez des fonctionnalités ou des composants que vous attendiez? 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! La plupart des éléments que nous avons ajoutés avec R1 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 jeudi 23 janvier à 11 h 00 HE ! Nous couvrirons toute l'interface utilisateur de Kendo tout au long de la journée, mais la section spécifique à jQuery donnera le coup d'envoi à 12:00 PM ET ! Les places sont limitées, alors rendez-vous sur la page du webinaire pour vous inscrire aujourd'hui et réserver votre place !