Nouveautés de l'interface utilisateur de Kendo pour jQuery avec R2 2021

La version R2 2021 de Kendo UI pour jQuery est ici. Cette version comprend les nouveaux composants TaskBoard, Skeleton et ActionSheet, ainsi qu'une tonne de nouvelles fonctionnalités et améliorations sur les composants existants.

C'est en mai et vous savez ce que cela signifie – une autre mise à jour importante de Kendo UI pour jQuery. Avec R2 2021, nous avons ajouté de nouveaux composants très intéressants, y compris le nouveau composant TaskBoard et d'autres fonctionnalités très demandées, alors allons droit au but et couvrons les nouveautés des composants de l'interface utilisateur jQuery avec R2 2021.

Nouveaux composants

] Nouveau composant: jQuery TaskBoard

Coup d'envoi, avec R2 2021 Kendo UI pour jQuery a ajouté le nouveau composant TaskBoard. Parfois appelé tableau Kanban, ce composant permet aux développeurs de définir un ensemble de colonnes (ou «voies») entre lesquelles les éléments peuvent être glissés et déposés. Ces éléments sont Kendo UI pour jQuery Cards, qui peuvent être personnalisés pour s'adapter à n'importe quel modèle que votre équipe désire.

Grâce à des implémentations similaires dans les projets GitHub et des outils comme Trello, il s'agit du composant d'interface utilisateur de gestion de projet ultime que vous pouvez ajouter à toute application existante avec seulement quelques lignes de code.

Je vous recommande vivement de vous diriger vers Kendo UI pour les démos de jQuery TaskBoard pour voir ce nouveau composant en action.

Nouveau composant: jQuery ActionSheet

Popularisé à la fois par iOS et Android, le composant ActionSheet est souvent utilisé pour fournir des éléments exploitables dans un menu qui s'anime à partir du bas de la page. La feuille d'action jQuery peut apparaître sur un clic de bouton ou une interaction similaire et fournir des éléments d'action supplémentaires parmi lesquels un utilisateur peut choisir. Ce composant peut considérablement améliorer l'expérience mobile de toute application Web réactive existante et a également ses utilisations dans les applications Web de bureau.

Pour en savoir plus sur le composant Kendo UI for jQuery ActionSheet, consultez la feuille ActionSheet demos .

Nouveau composant: jQuery Skeleton

Les applications Web modernes visent à réduire toutes les performances que vous pouvez tirer de vos applications. Parfois, il ne s'agit pas de performances réelles mais plutôt de performances perçues. C'est là que le nouveau composant jQuery Skeleton brille.

Avec ce nouveau composant, les développeurs peuvent améliorer l'expérience utilisateur globale de leurs applications en affichant des éléments représentant le contenu sur le point d'être chargé et en donnant aux utilisateurs une idée de ce à quoi ils peuvent s'attendre. la page avec laquelle ils interagissent. Grâce aux formes de ligne, de rectangle et de cercle intégrées, les développeurs peuvent créer une mise en page de formes qui représente tout type d'élément ou ensemble d'éléments.

Vous pouvez trouver la Kendo UI for jQuery Skeleton demos ici .

Nouveau composant: jQuery Circular Gauge

Ajout à la liste déjà riche de visualisations de données, avec R2 2021 Kendo UI pour jQuery a ajouté le nouveau composant jQuery Circular Gauge. Il s'agit d'une jauge qui se concentre spécifiquement sur une forme circulaire, indiquant une valeur le long d'une visualisation complète des données à 360 degrés. Avec la prise en charge des graduations et du texte au centre, cette nouvelle jQuery Circular Gauge convient parfaitement à tout type de tableau de bord.

Les démos jQuery Circular Gauge sont ici alors allez-y et laissez-vous inspirer pour savoir où vous pouvez ajouter cette nouvelle visualisation de données dans vos applications aujourd'hui.

Fonctionnalités des composants étendus

Grille jQuery: sélection de plage Exporter vers Excel

Avec R2 2021, l'interface utilisateur de Kendo pour jQuery Data Grid a ajouté la possibilité d'exporter une sélection de cellules vers Excel. C'est une fonctionnalité très intéressante car vous pouvez sélectionner n'importe quel ensemble aléatoire de cellules, même celles qui sont complètement déconnectées les unes des autres, et la grille jQuery exportera le contenu que vous avez sélectionné vers un fichier Excel de manière intuitive.

de ces fonctionnalités que vous devez voir pour le croire, alors consultez la démo Kendo UI for jQuery Range Selection Export to Excel demo ici .

jQuery Grid: Toggle Edit Mode

Une demande que nous ont vu apparaître de temps en temps la possibilité d'avoir l'interface utilisateur de Kendo pour jQuery Grid en mode lecture seule lors du chargement initial et de n'autoriser l'édition que lorsque l'utilisateur a explicitement activé le mode d'édition. Cela apparaît de plus en plus dans notre portail de commentaires et dans les fils de support, nous avons donc créé un tout nouvel article de base de connaissances expliquant comment vous pouvez implémenter ce scénario par vous-même.

Consultez la jQuery Grid Basculez l'article de la base de connaissances du mode d'édition ici .

jQuery TreeList: Filter Row

[19659007] En veillant à ce que nous continuions à construire la parité entre la grille de données jQuery et TreeList, avec R2 2021, nous introduisons officiellement la fonctionnalité de ligne de filtre dans l'interface utilisateur de Kendo pour le composant jQuery TreeList. Lorsque cette fonctionnalité est activée, une ligne dédiée d'éléments de filtre sera affichée en haut de la TreeList, juste sous les en-têtes de colonne.

Pour jouer avec la fonction de ligne de filtre jQuery TreeList, regardez cette démo .

jQuery TreeList: modèle de ligne

Une fonctionnalité très demandée pour jQuery TreeList est la possibilité de définir un modèle personnalisé pour une ligne entière . Auparavant, les développeurs ne pouvaient définir un modèle personnalisé que colonne par colonne, mais avec R2 2021, nous introduisons maintenant la fonctionnalité modèle de ligne dans l'interface utilisateur de Kendo pour jQuery TreeList. Vous avez maintenant un contrôle total sur la mise en page de n'importe quelle ligne dans la TreeList. Vous pouvez même créer un élément personnalisé pour contrôler la fonctionnalité de développement et de réduction.

Découvrez comment vous pouvez tirer parti de cette nouvelle fonctionnalité en vous dirigeant vers le Démonstration de l'interface utilisateur Kendo pour jQuery TreeList Row Template .

jQuery PDF Generator: Export Any SVG

Avec R2 2021, l'interface utilisateur Kendo pour la bibliothèque d'exportation PDF jQuery prend désormais en charge l'exportation any Élément SVG lors de la génération de fichiers PDF à partir de HTML. Cela offre encore plus de flexibilité lors du passage d'un élément HTML et de l'exportation de tout son contenu vers un fichier PDF.

Découvrez la possibilité d'exporter n'importe quel élément SVG au format PDF en action ici .

jQuery Carte: prise en charge d'Azure Maps

Avec l'annonce que Bing Maps est obsolète au profit d'Azure Maps nous voulions nous assurer que l'interface utilisateur de Kendo pour le composant jQuery Map prenait en charge ce nouveau service de mappage. Ainsi, avec R2 2021, nous avons officiellement ajouté la prise en charge d'Azure Maps.

En raison de la nature d'Azure Maps, nous n'avons malheureusement pas pu trouver un bon moyen d'héberger une démonstration en direct présentant cette intégration sans donner notre propre clé API , nous avons donc créé cette section de documentation de l'interface utilisateur de Kendo pour jQuery Maps que vous devriez facilement pouvoir suivre pour la faire fonctionner vous-même.

jQuery Scheduler: Hierarchical Grouping

L'interface utilisateur de Kendo pour jQuery Scheduler a reçu une nouvelle façon d'organiser des événements dans R2 2021 avec la nouvelle fonction de regroupement hiérarchique. Cela permet aux utilisateurs d'organiser des événements sous un ou plusieurs événements ou ressources parents. Un exemple de ceci serait pour une entreprise qui a plusieurs bureaux, chacun avec plusieurs salles de réunion et organisateurs de réunions. Dans ce cas, jQuery Scheduler affichera un calendrier pour chaque organisateur regroupé par salle de réunion. Il existe de nombreux autres scénarios où cela peut s'intégrer, et nous savons que de nombreuses personnes recherchent cette fonctionnalité.

Consultez la démo de Kendo UI pour jQuery Scheduler Hierarchical Grouping ici pour une Regardez à quoi cela ressemble en action.

Planificateur jQuery: Vue annuelle

S'appuyant sur l'ensemble déjà vaste de vues (jour, semaine, semaine de travail, mois, ordre du jour et chronologie), avec R2 2021, le jQuery Scheduler a reçu la vue annuelle. Cela permet aux utilisateurs de voir une année entière en une seule fois, affichant des indicateurs chaque fois qu'un événement est programmé. Pour plus de détails, les utilisateurs peuvent survoler ou cliquer sur le jour approprié pour voir un popover qui affiche les événements programmés pour ce jour particulier.

Pour les personnes intéressées, voici la Kendo UI for jQuery Scheduler Year View demo ].

jQuery Scheduler: rendu mis à jour pour les événements de 24 heures

Pour résumer les fonctionnalités que nous avons ajoutées à l'interface utilisateur de Kendo pour le planificateur jQuery avec R2 2021, nous avons maintenant un moyen mis à jour pour afficher les événements sur 24 heures (ou plus de 24 heures). Auparavant, ces types d'événements étaient affichés dans la zone «Toute la journée» en haut du planificateur tout en gardant le jour «normal» vide pour faire de la place pour d'autres événements (similaires à Outlook). Grâce à cette nouvelle fonctionnalité, les utilisateurs peuvent également organiser des événements prenant toute la journée comme un seul grand événement, s'étendant même sur plusieurs jours.

Pour voir comment vous pouvez tirer parti de cette nouvelle façon de rendre des événements 24/24 + heures, consultez Démo de jQuery Scheduler .

Éditeur jQuery: redimensionner les images via les poignées de glissement

L'interface utilisateur de Kendo pour jQuery Editor a également reçu une mise à jour avec R2 2021. Plus précisément, nous avons ajouté la possibilité de redimensionner n'importe quelle image dans le contenu du composant jQuery Editor à l'aide de poignées de glissement. Lorsque cette fonctionnalité est activée, chaque fois qu'un utilisateur sélectionne un élément d'image, il verra apparaître les poignées de glissement puis redimensionner l'image à la taille souhaitée.

Pour jouer avec le composant jQuery Editor et son redimensionnement d'image, rendez-vous sur cette démo .

jQuery QR Code: Swiss QR Code

Un format récent qui a été ajouté à la liste des types de QR Code en croissance est le format Swiss QR Code . L'article qui vient d'être lié donne des détails sur ce format pour ceux qui sont plus intéressés, mais le rapide tl; dr est que le format Swiss QR Code est un type spécifique de QR code à utiliser avec les factures.

Pour voir comment vous pouvez commencer à générer certains de ces codes QR vous-même, rendez-vous sur la démo de jQuery Swiss QR Code .

jQuery QR Code: Prise en charge de l'image dans le centre

L'interface utilisateur Kendo pour le composant QR Code jQuery a également reçu une nouvelle fonctionnalité qui permet aux développeurs d'ajouter une image personnalisée au centre du code QR généré. Pour tous ceux qui cherchent à créer des codes QR de marque en ajoutant un logo d'entreprise ou quelque chose de similaire, c'est la fonctionnalité que vous attendiez.

Voici un lien rapide vers une démo présentant l'interface utilisateur Kendo pour jQuery QR Code avec une image en son centre .

Refonte des forums de la communauté Telerik et Kendo UI

Enfin, nous avons réorganisé l'un des endroits préférés que les développeurs adorent traîner – la Communauté UI Telerik et Kendo Forums . Découvrez l'histoire complète du pourquoi et du quoi dans le article de blog dédié .

Vous avez des commentaires?

Ouf, c'est toute la liste des composants et des fonctionnalités. Tout ce que nous avons ajouté avec R2 2021 provient des commentaires de nos clients, et nous voulons continuer à fournir des versions utiles pour vous et vos équipes à l'avenir. Avons-nous manqué un composant ou une fonctionnalité spécifique dont vous avez besoin? Rendez-vous sur le Kendo UI for jQuery Feedback Portal et soumettez votre propre demande de fonctionnalité ou votez pour un élément existant. Assurez-vous que votre voix est entendue.

Webinaire et diffusion en direct

Vous voulez voir tout ce que j'ai mentionné ci-dessus en direct et en action? Eh bien, j'ai de bonnes nouvelles pour vous! Le jeudi 20 mai , à 11 h HE nous hébergeons le webinaire de la version 2021 de Kendo UI R2 2021. Cette session couvrira tout ce que je mentionne ned ici plus des informations sur Angular, React et Vue.

En plus de cela, nous aurons également un Twitch en direct pour plonger plus profondément dans l'interface utilisateur de Kendo pour Angular et KendoReact le mardi, 18 mai, de 9 h 00 à 10 h 30 HE et Mercredi 19 mai de 13 h 30 à 15 h 00 HE .

Des tonnes de plaisir auront lieu, alors rendez-vous sur la page d'inscription au webinaire Kendo UI R2 2021 pour réserver votre place et participer aux festivités.

Réservez votre place pour le webinaire