Nouveautés de KendoReact avec R2 2019

La version R2 2019 de KendoReact est arrivée. Elle contient un vaste ensemble de nouveaux composants tels que l'éditeur, DateTimePicker, Notification et plus encore! De plus, cette version apporte la virtualisation des colonnes à la grille KendoReact et une fonctionnalité de glisser-déposer à la TreeView.

Ils disent que le temps passe vite quand on s’amuse, et que les quatre derniers mois depuis le R1 2019 se sont envolés! Nous sommes très occupés depuis janvier, mais maintenant que nous sommes fermement en mai, je souhaitais expliquer ce que l'équipe de KendoReact avait mis au point pour R2 2019. Tous ces efforts ont été déployés pour que la création d'applications métier avec React soit efficace. aussi simple que possible et vous verrez que de nombreux composants et fonctionnalités exceptionnels ont été ajoutés à la suite d'interface utilisateur dans ce but précis.

Autres nouveaux composants

Editeur

Le nouvel éditeur de texte enrichi KendoReact est un éditeur WYSIWYG complet et hautement personnalisable. Il permet aux utilisateurs finaux de saisir du texte au format libre, d'appliquer un large éventail d'options de formatage et d'insérer du contenu HTML. La prise en charge du rendu personnalisé garantit que vous pouvez l'intégrer pour s'adapter à tous les scénarios de n'importe quelle application React. Le composant permet de créer des outils d'édition personnalisés (contrôles) et des plug-ins, ce qui facilite grandement l'extension et la personnalisation. Comme le reste de la bibliothèque de l'interface utilisateur de KendoReact, l'éditeur respecte les normes d'accessibilité et prend en charge la mondialisation.

Passez au Démos de l'éditeur pour voir le nouveau composant en action.

DateTimePicker

Le composant DateTimePicker est idéal pour les scénarios dans lesquels la date et l'heure doivent être sélectionnées par l'utilisateur. Conformément aux meilleures pratiques en matière d’expérience utilisateur, le composant fonctionne aussi bien pour les applications de bureau que pour les applications mobiles réactives. Comme l'indique la figure ci-dessus, la date et l'heure sont sélectionnées dans des "vues" distinctes dans DateTimePicker, séparant les deux parties de cette entrée tout en maintenant une expérience utilisateur uniforme.

Voici un lien rapide vers les démos du composant DateTimePicker qui devraient vous donner une bonne idée de l'utilisation de ce composant dans vos applications React aujourd'hui.

Notification

Avec le nouveau widget Notification, les développeurs peuvent facilement afficher des informations supplémentaires au-dessus de leur interface utilisateur existante. Comme le montre l'image ci-dessus, ce composant de notification a des conceptions et des styles prédéfinis pour les notifications de succès, d'avertissement ou d'erreur. Bien sûr, il est tout à fait en mesure de fournir votre propre style et vos propres options pour les exigences de notification!

Je souhaiterais pouvoir déclencher cette opération avec une notification elle-même, mais au lieu de cela, un lien simple devra être créé. Découvrez les exemples de notifications KendoReact ici même !

Curseur

Les curseurs constituent un moyen simple et astucieux de sélectionner une valeur particulière dans une plage donnée. Que ce soit en pourcentage, en cotes d'écoute ou simplement avec quelques niveaux d'opacité, les curseurs sont un moyen extrêmement utile de faire ressortir un peu plus vos applications.

Sortable

Initialement disponible uniquement en interne dans nos composants, le composant pouvant être trié KendoReact est une bibliothèque d’utilitaires très utile pour afficher une liste générique d’articles et réorganiser les éléments en les faisant glisser. Toutes les mises à jour de la liste sont conservées dans l'ensemble de données sous-jacent.

Il serait peut-être plus facile de voir cela en action, aussi consultez la KendoReact Sortable documentation pour obtenir une meilleure image de ce que vous ''.

Draggable (pour le glisser-déposer)

Auparavant aussi une implémentation interne, cette version voit la bibliothèque d’utilitaires glisser-déposer publiée pour tous les scénarios génériques de glisser-déposer. Permettez à n'importe quel élément de l'interface utilisateur d'être déplaçable et définissez exactement ce qui peut être déplacé et où il peut ou ne peut pas être déposé.

Pour trouver l'inspiration nécessaire pour introduire le glisser-déposer dans vos applications React, consultez la démonstration Présentation déplaçable

La grille devient encore plus puissante

Virtualisation de colonnes

Afin de fournir les meilleures performances possibles, la grille de données KendoReact offre désormais la virtualisation de colonnes au-dessus de la virtualisation de lignes déjà disponible. Peu importe le nombre de colonnes ou de rangées que vous jetez sur la grille, vos utilisateurs finaux verront le défilement se dérouler sans heurt.

Le gif ci-dessus ne rend peut-être pas cela justice. Découvrez la démonstration de virtualisation de grille pour voir à quel point la grille de KendoReact est lisse et rapide, avec le défilement vertical et horizontal!

Menu contextuel

Souvent, les utilisateurs finaux souhaitent avoir d'autres interactions avec une ligne ou une cellule particulière lorsque vous cliquez avec le bouton droit sur l’élément de données. Entrez dans le menu contextuel. Cette fonction permet à d'autres options d'interactivité d'apparaître dans un menu chaque fois qu'un élément de données est cliqué.

Qualité de vie mise à jour de la fonction TreeView

Glisser-déposer

Réorganisez facilement l'ordre, ou à quelle profondeur, les éléments de données dans TreeView sont affichés avec la nouvelle fonctionnalité de glisser-déposer intégrée de KendoReact TreeView. Cela fonctionne aussi bien pour les nœuds terminaux que pour les nœuds avec des enfants.

Cette fonctionnalité fonctionne extrêmement bien, et je recommande de sauter dans la démonstration de glisser-déposer de KendoReact TreeView pour jouer avec cela vous-même.

Sélection de case à cocher

Les développeurs ont souvent besoin d'extraire les éléments sélectionnés d'un widget TreeView. C’est maintenant encore plus simple qu’avant avec la nouvelle fonctionnalité de sélection de case à cocher qui affiche une case à côté de chaque nœud TreeView.

Ajouter la sélection de case à cocher est assez facile – il suffit de se rendre sur la démonstration de [KendoReactTreeViewSelection et Voyez comment vous pouvez l'activer dans votre TreeView KendoReact!

Autres éléments sur lesquels nous travaillons

Nous souhaitons également souligner d'autres éléments sur lesquels nous avons travaillé.

Démos avec Crochets et chargement paresseux

Crochets, crochets et plus de crochets. On dirait que nous ne pouvons pas échapper à ce mot dans le paysage React d’aujourd’hui. Bien que nous ne nous dépêchions pas de recréer chaque démo pour utiliser des points d'ancrage, nous en avons quelques exemples illustrant les deux points d'ancrage, dont l'un traite également du chargement paresseux!

Démos de rendu côté serveur

Rendu côté serveur C’est quelque chose que nos composants ont soutenu à peu près depuis le premier jour, mais nous n’avons pas trop d’exemples de cela en action. Eh bien, cela change! Voici un rapide aperçu de l'utilisation de SSR et de KendoReact pour ceux d'entre vous qui sont intéressés.

Inscrivez-vous au webinaire KendoReact R2 2019!

Si vous voulez voir ce que nous avons rapporté ici (et plus ) en action, vous devriez vous joindre à moi-même et à mes collègues du défenseur des développeurs lors du webinaire en direct KendoReact R2 2019 le mardi 4 juin à 11h00 HE! Les places sont limitées, assurez-vous de vous inscrire dès aujourd'hui pour réserver votre place!

Save My Seat