Fermer

avril 6, 2018

Kendo UI Grid pour Réagir – Construit à partir de la base Up!6 minutes de lecture

Kendo UI Data Grid for React


Nous avons créé le composant Grid de Kendo UI pour React, spécialement pour tirer parti des dernières technologies et vous faciliter la vie. Lisez la suite pour en savoir plus et voyez comment vous pouvez commencer rapidement.

Si vous ne faites que commencer votre projet React et que vous voulez afficher certaines données dans une table, vous pouvez utiliser la puissante Kendo UI Grid pour placer une grille dans votre application et la configurer avec juste quelques lignes de code. Notre composant de grille de données est facile à utiliser, mais hautement configurable et extensible.

Dans cet article, je vais vous montrer à quelle vitesse vous pouvez activer les opérations de gestion des données dans votre application et en expliquer les principales caractéristiques. Assurez-vous de lire jusqu'à la fin pour voir tous les trucs passionnants du futur et comment vous pouvez influencer la feuille de route de la Grille.

Grille très rapide et facile

Voici comment lier notre première grille à un tableau simple:

Et voici le résultat:

 Une grille d'UI Kendo dans l'exemple React

Comme vous l'avez déjà remarqué, la grille devinait automatiquement ses colonnes. Par souci de simplicité, voyons un usage plus pratique et plus évident:

 Exemple de grille Kendo UI React

Quelques notions de base

Voici quelques choses que vous devez savoir quand vous commencez à choisir des fournisseurs:

  • La grille, ainsi que tous les composants de notre suite React sont construits à partir de zéro, et conçus spécialement comme composants React .
  • Tous les composants Telerik React sont écrit en TypeScript . Donc, pour simplifier la vie de tous les développeurs de TypeScript qui construisent des applications React, vous obtenez nativement les typings.
  • Pour tous les développeurs JavaScript, nous avons soigneusement défini les PropTypes dans chaque composant.
  • La grille se comporte comme un composant entièrement contrôlé, ce qui signifie que vous pouvez modifier la configuration à tout moment .
  • Nous avons adopté la pratique de la livraison continue ce qui permet à la communauté de profiter de toutes les corrections de bogues et de nouvelles fonctionnalités dès qu'elles sont prêtes, sans avoir besoin d'attendre une publication trimestrielle.

Héritage et imbrication

La grille est entièrement écrite en utilisant Réagir aux éléments . Cela signifie qu'il peut:

Vitesse et performance

Tout est aussi rapide que possible. La grille effectue des opérations linéaires par colonnes et lignes. La vitesse dépend entièrement du framework React, du navigateur et de votre machine. Fondamentalement, la grille rend à la vitesse normale

serait également rendu avec React.

L'interface utilisateur de Kendo pour les composants React est construite en React pur, et peut profiter pleinement du rendu plus rapide introduit avec React. Fibre. Cela élimine également certaines des raisons des fuites de mémoire dans les composants qui sont toujours basés sur des bibliothèques telles que jQuery.

Fonctionnalités combinées

Les fonctionnalités sont indépendantes les unes des autres, ce qui signifie qu'elles peuvent être utilisées sans effets secondaires. Disons que vous avez besoin de la virtualisation avec la hiérarchie – pas de problème. En guise de démonstration, regardez cet exemple en direct avec virtualisation, hiérarchie et filtrage:

Communication avec l'App Logic

La Grille peut être entièrement contrôlée depuis le niveau de l'application (car vous pouvez changer la configuration à tout moment) ses événements informent le développeur de toute action de l'utilisateur. Cela vous permet, par exemple, de stocker les paramètres de la grille à tout moment, puis de les charger à nouveau, ou de réaliser facilement des fonctionnalités telles que Retour et Avance. Vous pouvez en voir un exemple en direct ici .

La Grille permet l'imbrication d'autres composants, y compris d'autres composants de Kendo UI React. Par exemple, le composant DropDownList peut être utilisé comme éditeur personnalisé dans la cellule Grid .

Les composants sont construits suivant les meilleures pratiques et leurs valeurs peuvent être contrôlées à l'aide d'accessoires, ce qui élimine le besoin de détails seulement aux méthodes de composants. Cela permettra aux composants d'être utilisés comme n'importe quel autre composant standard React, il rendra l'intégration avec des bibliothèques tierces comme Redux beaucoup plus facile et fluide, et il réduit l'incompatibilité des bibliothèques.

La grille supporte le transfert de données. permet une localisation facile et peut vous permettre de traduire tous les composants de Kendo pour les composants React.

Apparence et thèmes

Les composants Kendo pour React sont livrés avec des thèmes Sass très beaux et réactifs qui s'intègrent facilement aux bibliothèques populaires telles que Bootstrap

En plus de cela, nous avons le outil Sass Theme Builder incroyable qui vous permet de faire des variations illimitées des thèmes intégrés, de sorte que les composants peuvent s'adapter à tous les

Quoi de neuf: Feuille de route

Nous nous efforçons toujours de mettre les fonctionnalités les plus fréquemment demandées dans la grille. Si vous ne trouvez pas ce que vous cherchez, s'il vous plaît consulter notre React Roadmap . Il vous permet de voir ce que nous avons prévu de publier à l'avenir, afin de savoir si la fonctionnalité la plus importante pour votre entreprise est déjà en cours.

Vous pouvez influencer nos priorités en votant pour les fonctionnalités dont vous avez besoin. la plupart dans notre portail de commentaires .

Si vous rencontrez des problèmes lors de l'utilisation des composants, veuillez soumettre un ticket dans notre système de support ou signaler un problème dans notre GitHub repo . ] Si vous êtes déjà excité d'essayer l'interface utilisateur Kendo pour les composants React, vous pouvez commencer un essai gratuit de 30 jours de Kendo UI pour React

Démarrer mon Kendo UI pour React Trial

Joyeux codage, et profitez de nos composants React hautement performants que nous avons construits pour vous à partir de zéro


Les commentaires sont désactivés en mode prévisualisation.
[ad_2]
Source link

0 Partages