Nouveautés de Kendo UI pour Angular avec R2 2019

La version R2 2019 pour Kendo UI pour Angular est arrivée! Lisez à propos des mises à jour apportées aux composants Planificateur, Éditeur et Grille, ainsi que de nouveaux composants et autres mises à jour!

Le mois de mai est arrivé et, bien que la poussière de ng-conf puisse s'être calmée, je souhaite en remuer quelques-uns Plus de battage pour Angular en parlant de la version R2 2019 des composants angulaires du bundle Kendo UI!

Il y a beaucoup à couvrir, alors sautons directement aux choses.

Le planificateur angulaire obtient de nombreuses améliorations [19659005] Le planificateur est l'un de nos plus gros composants sur lequel plusieurs d'entre vous ont déjà travaillé. Bien que la version initiale de l'ordonnanceur fût un peu rudimentaire, nous avons travaillé dur pour ajouter des fonctionnalités demandées par les utilisateurs, ainsi que pour l'inspiration et les idées de nos autres composants de l'ordonnanceur d'autres suites.

R2 nous avons pu ajouter pas mal de fonctionnalités!

Événements de redimensionnement

C’est une fonctionnalité assez importante pour toute implémentation de planificateur ou de calendrier, et bien que nous ayons publié cette fonctionnalité plus tôt dans l’année, elle se situe toujours dans la même situation R1 et R2 2019. Ainsi, vos utilisateurs finaux peuvent désormais facilement mettre à jour la durée de tout événement en redimensionnant simplement l'événement et en faisant glisser le haut ou le bas de l'événement vers les créneaux horaires souhaités.

Découvrez une démo de le redimensionnement des événements en action ici .

Événements de glisser-déposer

Dans la même veine que le redimensionnement d'événements, il est également important que vos utilisateurs puissent librement glisser-déplacer des événements sur la surface du calendrier. . Ainsi, avec la dernière édition du planificateur angulaire, vous pouvez facilement l'activer dans tout planificateur éditable, ce qui inclut bien sûr également la possibilité d'empêcher certains éléments d'être déplacés ou de limiter leur emplacement. Voici une démonstration montrant le fonctionnement de la fonctionnalité glisser-déposer!

Vues sur plusieurs jours et par semaine de travail

Le mode d'affichage de votre emploi du temps est également important. Souvent, dans des clients d'agenda tels que Outlook ou Google Agenda, vous avez la possibilité de basculer entre différents affichages (un seul jour, plusieurs jours, une semaine de travail, un agenda, etc.). Bien que plusieurs de ces vues aient déjà été créées, la dernière partie de la liste contient des vues de la semaine multi-jours et de travail qui peuvent être soit la vue par défaut pour tous nos besoins de planification, soit l'une des nombreuses vues que vous autorisez. vos utilisateurs à choisir. Pour savoir comment ajouter cela dans vos applications Angular aujourd'hui, passez à la section de démonstration de Kendo UI Angular Scheduler pour afficher une démonstration interactive et un code source permettant de les implémenter!

Export to PDF [19659008]

Le titre de la section donne des informations ici, mais le planificateur angulaire de Kendo UI prend désormais en charge l'exportation de la vue actuelle au format PDF en un clic. un seul bouton! La configuration initiale ne comprend également qu'une seule ligne de code, avec des options de configuration plus avancées disponibles. Il est donc extrêmement simple d'ajouter ceci à votre implémentation existante du planificateur! Voici une démonstration de l'export PDF en action .

Vue de l'heure actuelle

Parfois, nous sommes coincés au plus profond de notre calendrier où nous ne savons pas nécessairement où nous sommes comparés à l'heure actuelle, d'où la nouvelle possibilité pour le planificateur de Kendo UI de donner une jolie petite ligne indiquant l’heure actuelle. Passez à la démonstration du planificateur et cliquez sur «Aujourd'hui» pour voir comment cela fonctionne en temps réel.

Outils, outils et autres outils pour l'éditeur de texte enrichi

L'éditeur de texte enrichi de Kendo UI for Angular est un composant très récent et nous avons travaillé d'arrache-pied pour ajouter autant de fonctionnalités que possible à ce composant fréquemment utilisé et demandé. Ce sont précisément les nouvelles options que nous avons pu ajouter pour R2 2019.

• 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
• Indice et exposant
• Afficher l'onglet HTML
• Sélecteur de police et sélecteur de taille de police
• Texte pour aligner et justifier le contenu
• Bouton de mise en forme transparent
• Localisation
• Prise en charge de droite à gauche (RTL)

C'est beaucoup de fonctionnalités à ajouter ! Ce n’est bien sûr que le début, mais avec ces fonctionnalités, nous apportons déjà les fonctionnalités les plus critiques pour l’édition de texte enrichi dans vos applications Angular! Cette démo de l'éditeur met tous ces outils en évidence, alors n'hésitez plus et jouez avec ces nouvelles fonctionnalités!

Ajouts à la grille

Tout le monde aime la grille, et avec raison! Avec cette version, nous avons réussi à ajouter quelques fonctionnalités supplémentaires à ce composant populaire.

Défilement sans fin

Le défilement sans fin offre une nouvelle voie aux utilisateurs. pour faire défiler de grands ensembles de données, avec plus de données chargées chaque fois que la barre de défilement atteint le bas de la zone de défilement. Toutes les fonctionnalités de la grille (filtrage, tri, regroupement, etc.) peuvent être utilisées avec ce mode de défilement, mais cela élimine la nécessité d'un pager réel au bas de la grille. Pour le voir en action, consultez notre démo Grid Endless Scrolling .

Cell Spanning

Son nom l'indique, mais le Kendo UI Angular Grid prend désormais en charge l'étendue des cellules dans le même ligne (colonne), ainsi que dans la même colonne (ligne).

Fonctionnalité Développer / Réduire compatible avec l'exportation Excel

Une fonctionnalité intéressante que je ne savais même pas que Excel pouvait faire était de développer et de réduire certains sections avec un bouton traditionnel plus / moins. Eh bien, il s'avère que nous pouvons et nous pouvons également le soutenir! Par conséquent, si vous utilisez le regroupement dans la grille de Kendo UI et souhaitez autoriser le document exporté à fournir des icônes de développement et de réduction pour vos groupes, cela peut être fait facilement. Rendez-vous à cette démonstration de grille pour voir comment!

Deux gros éléments pour les DropDowns

Le groupe de composants DropDownList a également reçu deux mises à jour importantes: le regroupement et la virtualisation

Listes groupées

Avec les derniers bits, vous pouvez désormais définir un champ particulier pour regrouper les éléments de données dans un menu déroulant, plutôt que de simplement répertorier tous les éléments sans ordre spécifique. Ceci est demandé depuis un certain temps et je suis heureux de dire qu'il est livré pour le R2 2019.

Virtualisation (bientôt)

Il s'agit d'une autre fonctionnalité très importante pour les composants DropDown – en particulier dans les scénarios avec une longue liste de données. Bien que cela ne soit pas disponible à compter d'aujourd'hui (15 mai 2019), il sera disponible au cours des deux prochaines semaines. Donc, si vous lisez ceci dans le futur, la virtualisation devrait déjà faire partie du paquet!

Je voulais toujours le mentionner dans le billet de blog annoncé aujourd'hui, car je sais que c'est une fonctionnalité très importante pour beaucoup d'entre vous qui utilisent les drop downs. L'implémentation est plus ou moins opérationnelle, mais nous souhaitons faire quelques ajustements avant de publier la fonctionnalité afin de nous assurer qu'elle est conforme à nos normes habituelles.

Nouveau composant: ColorPicker

Un tout nouveau widget que nous avons ajouté à cette version est le composant Angular ColorPicker . C'est un composant très utile à utiliser chaque fois qu'un choix de couleur doit être impliqué dans votre application.

Que ce soit dans une liste de couleurs prédéfinies qui apparaissent une fois que vous cliquez sur le menu déroulant, comme dans l'image ci-dessus, ou si vous voulez fournir une sélection de dégradé pour sélectionner automatiquement la couleur idéale, ou même renoncer à la totalité du dépôt et simplement restituer des blocs de couleur ou le dégradé directement sur la page – tout cela est possible avec le Kendo UI ColorPicker!

Accessibilité [19659005] L’accessibilité est toujours quelque chose que nous prenons très au sérieux pour les équipes de Kendo UI, et Angular n’y fait pas exception. Nous essayons de rendre nos composants compatibles avec les normes WCAG 2.1, Section 508 et WAI-ARIA. Cependant, certains scénarios et fonctionnalités pouvant interdire certains niveaux de conformité, nous avons créé cet article sur la documentation d'accessibilité afin de garantir la conformité aux directives WCAG 2.1 lorsque vous implémentez nos composants d'interface utilisateur angulaire.

Rejoignez-nous pour le webinaire!

Si vous voulez voir ce que nous avons évoqué ici en action, vous devez vous joindre à moi et à mes collègues de l'avocat du développeur pour notre forum en direct sur le Kendo UI le jeudi 6 juin à 11h00. ET! Le nombre de places pour ce webinaire est limité, alors assurez-vous de ne pas vous échapper et inscrivez-vous pour réserver votre place dès aujourd'hui!

Source link