Fermer

novembre 14, 2018

Pourquoi choisir la grille de données Telerik WPF pour votre prochain projet?


Cet article de blog décrit les fonctionnalités les plus populaires du Telerik WPF DataGrid et explique pourquoi il s’agit d’une excellente option à envisager pour vos projets actuels ou futurs.

DataGrids, Grids, GridViews. Ils peuvent être trouvés dans à peu près toutes les applications qui présentent des données. Et pour une bonne raison. Les données affichées dans un tableau avec des lignes et des colonnes sont à la fois faciles à lire et significatives. Les utilisateurs sont tellement habitués à utiliser des feuilles de calcul de type Excel qu'ils s'attendent à trouver les mêmes fonctionnalités dans tout ce qui en ressemble, ce qui est le cas de la plupart des applications de bureau et des applications sectorielles en particulier. C’est précisément pour cette raison que la présentation de données dans des grilles peut être difficile pour toute application et le développeur qui la sous-tend.

Examinons un scénario. Supposons que vous construisez une application de bureau pour le secteur de la finance ou de la santé. Vous ou votre équipe de développement avez créé l'architecture parfaite pour votre application WPF. Vous utilisez DI, MVVM, IoC. Vous obtenez les données d'un service Web, du cloud ou d'une base de données, locale ou distante, et vous les traitez de manière testable et maintenable. C’est ce que vos développeurs savent faire et qu’ils ont fait à de nombreuses reprises.

Mais voici l’essentiel: présenter ces données à l’utilisateur de manière significative, tout en offrant une interface utilisateur et une expérience utilisateur exceptionnelles. Cela peut être difficile et même le meilleur peut lutter. Honnêtement, les utilisateurs finaux de votre application ne se soucient guère de l'architecture que vous avez utilisée tant que l'application peut faire le travail – il vous suffit de présenter les données de manière claire, visuelle et facile à comprendre. . Par conséquent, si vous souhaitez afficher vos données dans une grille, lisez-le – vous êtes au bon endroit.

Le DataGrid dans Progress UI Telerik pour WPF est une grille puissante et facile à utiliser. Nous allons parcourir beaucoup de terrain dans cet article – n'hésitez pas à lire du haut ou à parcourir la fonctionnalité qui captive votre intérêt.

Table des matières

Création de colonnes

Pour la base de une grille de données WPF nous avons besoin de colonnes et de colonnes . Les lignes sont évidentes: elles représentent les objets de votre source de données. Les colonnes, par contre, représentent les propriétés de ces objets. La plupart des datagrids prennent en charge la génération automatique de colonnes. Cette fonctionnalité vous permet d'afficher vos données avec une configuration minimale, voire nulle. Il convient aux scénarios simples ou aux situations dans lesquelles la forme des données à présenter est déterminée au moment de l'exécution. Le contrôle des colonnes générées peut être effectué à l'aide de l'attribut d'affichage bien connu ou de l'événement RadGridView AutoGeneratingColumn . Ce dernier vous donne un contrôle complet sur les colonnes générées et sur le processus de génération lui-même.

Si vous avez besoin de plus de contrôle sur ce qui est présenté et comment vos colonnes sont présentées, vous pouvez les définir manuellement. Avec la solution Telerik WPF DataGrid, vous disposez de différents types de colonnes: données, expression, case à cocher, liste déroulante, image, entrée masquée, lien hypertexte. Vous pouvez faire beaucoup en utilisant ceux-ci. Et si vous avez besoin de quelque chose de plus, vous pouvez toujours définir votre propre modèle de cellule. Vous avez également le contrôle sur l'en-tête et le pied de page de la colonne, vous pouvez donc placer des éléments tels que des images dans l'en-tête de la colonne ou ajouter du texte au pied de la colonne. Une fonctionnalité très utile est les agrégats de colonne . Avec cette fonctionnalité, vous pouvez ajouter des fonctions d'agrégation telles que min, max, sum, avg au contenu de votre colonne et afficher les résultats dans le pied de colonne.

 GridViewColumns "title =" GridViewColumns "data-openoriginalimageonclick "vrai" style = "vertical-align: middle;" /> </a data-recalc-dims=

Regroupement de vos données

Le regroupement de vos données est une fonctionnalité très puissante et utile. Le rendre simple et convivial Parmi les principales fonctionnalités du Telerik WPF DataGrid, vos utilisateurs peuvent facilement grouper les données en faisant simplement glisser la colonne désirée vers le panneau correspondant au groupe. Le groupement multiple est également pris en charge.

 GridViewGrouping "title =" GridViewGrouping "data-openoriginalimageonclick =" true "style =" vertical-align: middle; "/> </a data-recalc-dims=

Vous souvenez-vous des agrégats de colonnes? Lorsque les données sont regroupées, les fonctions d’agrégation fonctionnent également et vous fournissent des informations agrégées sur chaque groupe. Ceci est un comportement intégré et tout ce que vous avez à faire pour l'activer consiste à ajouter des fonctions d'agrégation à vos colonnes et à regrouper vos données.

 GridViewGroupingAggregates "title =" GridViewGroupingAggregates "data-openoriginalimageonclick =" true " style = "vertical-align: middle;" /> </a data-recalc-dims=

Une dernière chose: en raison de la complexité du groupe, le regroupement d'un grand ensemble de données sur plusieurs niveaux peut entraîner des problèmes de performances. Le Telerik DataGrid le sait bien. Ce type de rendu est appelé mode de rendu de groupe plat et est contrôlé par la propriété GroupRenderMode qui affiche simplement les lignes les unes sous les autres au lieu de les imbriquer à plusieurs niveaux.

N'oublions pas le tri

Cela est assez intuitif pour tous les scénarios: les clients ont l'habitude de cliquer sur l'en-tête de la colonne et s'attendent à trouver la flèche de tri familière, et ils tiennent pour acquis que chaque grille de données devrait le faire. si fo r web, desktop ou mobile. Bien entendu, les grilles Telerik prennent en charge le tri des colonnes et cela fonctionne de la manière habituelle. Mais il y a plus. Lorsque vos données sont regroupées, vous pouvez modifier le sens de tri de chaque groupe individuellement et, en outre, vous pouvez trier les données de chaque groupe dans une autre colonne. Ceci est indiqué par les flèches montrées dans les boutons de groupe apparaissant dans le panneau de groupe et dans les en-têtes de colonne, comme on peut le voir dans les captures d'écran que j'ai ajoutées ci-dessus. Le tri sur plus d'une colonne est également pris en charge, ce qui vous permet de mieux comprendre vos données.

Le tout-puissant filtrage

L'une de mes fonctionnalités intégrées préférées est le filtrage de colonne (même si, je dois l'avouer, je suis un peu biaisé). L'utilisateur peut filtrer les données présentées selon leurs propres critères, ce qui est particulièrement utile dans les ensembles de données volumineux et complexes. Par défaut, le filtrage est activé sur toutes les colonnes liées aux données. Vous pouvez désactiver ce comportement en le désactivant si vous estimez que le filtrage sur cette colonne n'est pas nécessaire. La fenêtre de filtre elle-même ressemble beaucoup à ce que l'on trouve dans pratiquement tous les outils de traitement de feuille de calcul.

 GridViewFiltering "title =" GridViewFiltering "data-openoriginalimageonclick =" true "style =" vertical-align: middle; "/> </a data-recalc-dims=

Le filtre pour une colonne donnée sélectionne toutes les valeurs distinctes présentes dans votre jeu de données pour cette colonne particulière. L'utilisateur peut filtrer en sélectionnant simplement une ou plusieurs valeurs spécifiques à l'aide des cases à cocher. Les expressions de filtre avancées sont également prises en charge. Vous pouvez filtrer les expressions qui vérifient si les valeurs de vos colonnes commencent par une valeur de chaîne spécifique, ou sont supérieures, égales, inférieures ou entre des valeurs données. Les possibilités sont infinies ici et tout est fait automatiquement pour vous et hors de la boîte. Le consommateur de vos données, lorsqu'il est présenté dans une grille de données Telerik, dispose de toute la puissance de filtrage dont il a besoin.

Recherche de personnes pour des jeux de données plus volumineux

Parfois, vous avez juste trop de données à saisir en même temps pour l'utilisateur. Une solution populaire consiste à utiliser la pagination. Telerik UI pour WPF contient un composant spécialement conçu à cet effet: le RadDataPager . Cela fonctionne en étroite collaboration avec le DataGrid et c'est un jeu d'enfant à configurer, comme vous pouvez le voir dans l'extrait de code.

 GridViewPages "title =" GridViewPages "data-openoriginalimageonclick =" true " style = "vertical-align: middle;" /> </a data-recalc-dims=

Le contrôle de l'apparence et des options de pagination commence par la propriété DisplayMode . Elle est de type PagerDisplayModes . Enumération, et ses membres contrôlent ce qui est affiché par le pageur. Vous pouvez également contrôler la taille de la page, qui correspond au nombre d’éléments affichés en même temps à l’écran.

Une chose intéressante à propos de la séparation du composant qui effectue la pagination de la Avec DataGrid, vous pouvez utiliser le téléavertisseur de données avec d'autres composants, tels que ListView ComboBox ou même des graphiques, ce qui peut s'avérer utile lors de la création d'un tableau de bord.

Row Details

Lorsque vous avez beaucoup d'informations et que vous ne pouvez pas les afficher le tout en n'utilisant que des colonnes, alors vous pourrez peut-être afficher ces informations dans un détail de ligne. Chaque ligne de la grille de données WPF est capable de présenter des informations supplémentaires si la forme d'une ligne en détail . L'avantage de cette approche est qu'elle peut être configurée pour être affichée uniquement lorsque la ligne est sélectionnée. Cela peut réduire le nombre de colonnes et donner à votre grille de données une présentation plus nette et plus compacte, tout en fournissant toutes les informations dont l'utilisateur a besoin. Si vous préférez, vous pouvez également afficher les détails de la ligne à tout moment, que cette dernière soit sélectionnée ou non.

 GridViewRowDetails "title =" GridViewRowDetails "data-openoriginalimageonclick =" true "style =" vertical-align: middle; "/> </a data-recalc-dims=

La configuration des détails de ligne se fait par le biais du modèle de détails de ligne. Vous avez une totale liberté quant à ce que vous insérez dans celui-ci. Vous pouvez afficher du texte, insérer des graphiques ou même

Exporter vers différents formats

L’un des avantages de l’utilisation de la boîte à outils Telerik UI for WPF réside dans le fait que vous marchez sur les épaules de géants. Il existe déjà une excellente bibliothèque de traitement de documents qui a été développé pour les outils Telerik et, bien sûr, il est bien intégré au Telerik WPF DataGrid. Les données présentées par la grille peuvent être exportées vers de nombreux formats pour différentes applications, y compris Microsoft Excel (à la fois. xlsx et xls f ormat sont pris en charge), et l'exportation au format PDF et HTML est également possible. Tout vient tout droit sorti de la boîte. Vous pouvez aussi le personnaliser.

Le presse-papier est un autre moyen d’exporter des données. Le RadGridView prend en charge la copie et le collage de données depuis et vers le Presse-papiers, ce qui le rend très flexible. Vous avez la possibilité de copier les cellules avec ou sans les en-têtes, les pieds de page, les lignes et les colonnes vides.

Grille hiérarchique

Parfois, vos données peuvent être hiérarchiques avec une relation parent-enfant. En élargissant nos échantillons de données actuels, nous pouvons afficher les employés que nos gestionnaires gèrent. Le RadGridView peut afficher ces données à l'aide d'une grille de données imbriquée .

 GridViewNested "title =" GridViewNested "data-openoriginalimageonclick =" true " </a data-recalc-dims=

Notez que la grille imbriquée est un RadGridView complet. Le support hiérarchique de DataGrid gère des ensembles de données auto-référencées . Ainsi, si vos données ont une relation ParentID par exemple, elles sont bonnes à utiliser.Si toutes vos données ne forment pas une hiérarchie, vous pouvez masquer ou afficher les icônes d’extension de ligne en les liant directement à vos données. [19659003] Cette fonctionnalité peut s'avérer utile dans les cas où vos données sont vraiment de nature hiérarchique et que l'exploration en profondeur a du sens, ce qui peut également réduire l'encombrement et le débordement de données dans de grands ensembles de données. Combiné à un chargement paresseux, il peut également améliorer les performances. , car vous ne récupérerez que les données que vous avez réellement affichage à l'écran.

Gestion des données

L'affichage des données est une bonne chose, mais la grille de Telerik vous permet également de modifier les données qu'il présente. Vous pouvez faire insérer, mettre à jour et supprimer avec validation et tout le reste. Pour l'activer, vous devez actionner quelques commutateurs et vous êtes prêt à partir. Assurez-vous que votre collection n'est pas en lecture seule et que le type des objets de votre ensemble de données possède un constructeur par défaut public.

 GridViewEditing "title =" GridViewEditing "data-openoriginalimageonclick =" true "style =" vertical-align: middle; "/> </a data-recalc-dims=

Cette fonctionnalité peut être utile dans certains cas de figure lorsque votre ensemble de données n'est pas trop complexe. Vous pouvez également autoriser l'utilisateur à modifier ses données. valeurs de cellules particulières sans la hâte d'ouvrir d'autres vues et de remplir de longs formulaires.

Theming

Enfin, vos données ne sont en réalité qu'un tas de chiffres sans interface utilisateur belle et moderne. de thèmes facilement disponibles que vous pouvez appliquer à RadGridView et à tout composant Telerik, voici deux de mes thèmes préférés, les thèmes Material et Fluent. Dans les captures d'écran ci-dessus, vous pouvez voir le thème Windows 8, un autre grand.

 GridViewTheme1 "title =" GridViewTheme1 "data-openoriginalimageonclick =" true "style =" vertical-align: middle; "/> </a data-recalc-dims=

 GridViewTheme2" title = "GridViewTheme2" data-openoriginalon_click "" true "style =" vertical-align: middle; "/> </a data-recalc-dims=

L'application d'un thème est un jeu d'enfant. Il vous suffit de référencer le thème que vous désirez et de fusionner ses ressources dans votre fichier App.xaml. Pourquoi la fusion? Parce que les assemblages Telerik NoXaml, qui sont les recommandés, ne contiennent aucun fichier Xaml. Pour donner l'apparence de votre WPF DataGrid, vous devez référencer un thème et fusionner les ressources de votre application. Cette séparation permet de regrouper les ressources dépendant du thème dans différents assemblages et réduit la taille globale des dépendances et de votre application, car vous faites uniquement référence à ce dont vous avez réellement besoin.

Un autre avantage des assemblys NoXaml est le suivant: vous pouvez personnaliser très facilement les thèmes intégrés . Vous pouvez absolument changer n'importe quoi, en partant d'une couleur pour retaper complètement le composant. Lorsque vous avez juste besoin de donner un style à un composant spécifique, vous serez heureux de savoir qu'il existe de nombreuses API pour le faire. Un article de blog dédié sur le style et la thématisation va bientôt paraître.

Résumé

Les DataGrids sont très populaires et font souvent partie des exigences d'un projet. Si vous êtes confronté à une telle décision, considérez le DataGrid dans Telerik UI pour WPF car je l’ai personnellement testé de manière approfondie et je peux vous assurer que c’est un composant très puissant et polyvalent pour la visualisation de données sous forme de tableau. . C'est un excellent outil pour afficher vos données et prendre des décisions en fonction de vos données. J'ai décrit ci-dessus certaines des fonctionnalités clés que les clients aiment et recherchent lorsqu'ils travaillent avec DataGrids. J'espère que vous trouverez cela utile et que vous déciderez vous-même si le DataGrid de Telerik convient à votre scénario.

Il s'agit du premier article de blog de notre nouvelle série consacrée à DataGrid dans la bibliothèque WPF de Telerik. La prochaine fois, je vous montrerai comment charger votre grille avec des données, car les grilles sont entièrement constituées de données. Et bien sûr, nous allons le faire de manière MVVM. Alors restez à l'écoute. Indiquez également dans les commentaires le sujet que vous souhaitez voir à propos de la vue en grille. Jusqu’à la prochaine fois, bonne codification!


Les commentaires sont désactivés en mode Prévisualisation.




Source link