Blazor DataGrid rencontre la visionneuse de rapports Blazor

L'interface utilisateur Telerik pour Blazor offre un excellent moyen d'interagir et de visualiser les données manipulées via son composant Grid, tandis que Telerik Reporting peut communiquer les données d'une manière unique. Nous avons réuni les deux pour montrer comment vous pouvez facilement modifier l'ensemble de données selon vos souhaits et l'afficher dans des rapports.

Telerik Reporting est utile pour afficher les données de plusieurs façons, comme par le biais de graphiques, de tableaux, de statistiques et plus encore. Chaque rapport peut être conçu et modifié dans le concepteur pour le rendre parfait pour ce dont vous en avez besoin, et l'ensemble de données peut être filtré, trié et regroupé en fonction d'expressions et de paramètres. Bien que la manipulation des données puisse être effectuée de manière très détaillée, ce n'est pas la plus simple dans le champ des paramètres du visualiseur lorsque l'ensemble de l'application est en ligne.

Au lieu de cela, la grille de Telerik UI for Blazor vous permet de travailler avec les données du navigateur et d'affiner l'ensemble de données pour n'inclure que les lignes souhaitées. Il fournit un retour visuel instantané sur les changements appliqués et le rend facile à comprendre. Bien que la grille puisse être exportée dans différents formats, le logiciel de création de rapports offre plus de flexibilité pour, par exemple, créer de superbes PDF.

L'idée est de combiner les atouts de chaque outil, de fournir à l'utilisateur une manière intuitive d'interagir avec les données, puis de proposer immédiatement des rapports avancés qui, même s'ils sont préfabriqués, sont basés sur le même jeu de données. l'utilisateur a interagi avec.

Demo Application

Pour cet article, nous avons créé une démo fonctionnelle pour afficher un exemple de ce à quoi cela pourrait ressembler. Le code source de ce projet peut être trouvé sur GitHub . Dans cette application, nous utilisons certains des exemples de données fournis par la base de données AdventureWorks pour afficher différents produits dans la grille. L'utilisateur peut appliquer des filtres, un tri et un regroupement à ces données, et ceux-ci seront fournis au moteur de rapport lors du rendu des rapports. Nous avons créé quelques exemples de rapports qui affichent les données de différentes manières, comme par exemple un rapport sur les ventes.

L'interface utilisateur Telerik pour Blazor Grid présentée ci-dessus est basée sur la même grille que vous trouvez dans les démos d'interface utilisateur en ligne, avec quelques différences. Chaque fois que des modifications sont appliquées à la grille, elles sont stockées sous forme de données JSON ainsi que dans l'état de la grille. Ces données JSON sont alors prêtes à être transmises avec la requête au service REST de rapports lorsque la visionneuse de rapports est chargée. request contient des données JSON personnalisées, cela doit être géré de manière personnalisée dans le service REST, ce qui se fait en implémentant un résolveur de rapport qui gère la demande et traduit les données incorporées afin qu'elles puissent être appliquées au rapport.

Razor Page Setup

Dans les fichiers de projet, le Pages / Index.razor est le fichier qui contient à la fois le Grid for Blazor and Report Viewer tag for Blazor en plus de t il fonctionne pour générer les données JSON.

 public   void   SetReportSourceJson (GridState  gridState) 

La ​​méthode ci-dessus prend le gridState comme paramètre, c'est là que nous pouvons trouver tous les filtres, tri et regroupement appliqués à la grille. De plus, la fonction stocke le fichier de rapport à charger et les données réelles de la grille dans des données JSON.

Lorsque l'onglet est basculé sur Rapport, la visionneuse de rapports est chargée. Dans le cadre de sa balise, la propriété ReportSource du spectateur est définie sur les données JSON.

Sur cette page de rasoir, nous avons également ajouté des fonctionnalités pour changer de rapport avec des boutons. Une fois l'onglet Rapport ouvert, trois boutons permettent à l'utilisateur de choisir entre trois rapports et, lorsqu'il clique dessus, modifie le nom du rapport et déclenche la fonction SetReportSourceJson ci-dessus.

Service REST de rapport

Le contrôleur recevant les requêtes des téléspectateurs pour rendre les rapports est configuré de la manière habituelle expliquée dans la documentation à l'exception du résolveur ReportSource personnalisé . Dans notre projet de démonstration, c'est la classe appelée GridReportSourceResolver.cs et est utilisée par ReportsController pour trouver quel rapport charger et renvoyer sa définition. C'est là que nous implémentons la fonctionnalité personnalisée pour gérer cette requête, car la requête ne contient pas de données structurées par défaut, mais plutôt les données JSON que nous avons créées dans la page rasoir.

 ReportSource Resolve ( string   ] report, OperationOrigin operationOrigin, IDictionary < string  object > currentParameterValues) 

La ​​méthode Resolve est appelée par le contrôleur et fournit les données intégrées dans la requête via des paramètres. Le premier d'entre eux, la chaîne 'report', est l'ensemble des données JSON que nous pouvons maintenant désérialiser et lire. Ensuite, le fichier de rapport lui-même est désérialisé et nous pouvons maintenant commencer à modifier la définition.

Dans le scénario du premier rapport appelé "DataGridExampleReport.trdx", le rapport a une source de données JSON, mais le contenu est vide. Étant donné que l'ensemble de données est fourni via les données intégrées, nous pouvons mettre à jour la source de données des rapports.

 var report =  this  .gridReportInstance.Report;   
   var reportDataSource = (JsonDataSource) report.DataSource;   [19659008]   reportDataSource.Source = productJson; 

Application des filtres, tri et regroupement

Toujours à l'intérieur du GridReportSourceResolver.cs, la dernière moitié du fichier est constituée des méthodes utilisées pour convertir et appliquer les filtres, tri et regroupement dans le rapport. Les trois méthodes BindFilters, BindSorts et BindGroupByParameter prennent les données désérialisées comme paramètres.

Pour appliquer les filtres, une traduction est nécessaire pour travailler dans le rapport. La grille et le rapport gèrent les filtres de manière légèrement différente, nous avons donc créé ici une traduction explicite pour chaque type de filtre. Pour cette raison, une méthode distincte a été créée

 private   Filter ToReportingFilter (ReportSourceFilter filter) 

Elle prend un objet où le filtre est défini de la même manière que la grille l'utilise. La grille et le rapport comparent tous deux deux valeurs ou expressions avec un opérateur intermédiaire pour appliquer des filtres. La différence est que Grid a plus d'opérateurs que Reporting. Par exemple. Le reporting n'a pas d'opérateur "IsEmpty", et dans ce cas nous retournons:

 return   new   Filter ( "= Fields."   + filter.member.Value, FilterOperator. Comme,  string  .Empty); 

L'application du tri est plus simple que les filtres, car elle définit uniquement le champ à trier et s'il doit être croissant ou décroissant.

Le regroupement est résolu dans d'une manière différente. Lors de la conception des rapports, j'ai créé un regroupement des données, mais basé sur une valeur statique, comme "1". Il en résulte que toutes les lignes de données seront regroupées et ce n'est que lorsque nous modifierons cette valeur que nous créerons en fait plusieurs groupes. J'expliquerai cela plus en détail dans la section suivante.

Conception et configuration des rapports

Je ne vais pas dans beaucoup de détails sur la conception du rapport lui-même, mais comme la possibilité de définir des groupes dépend de la conception, je vais expliquer cette partie.

Pour les trois rapports utilisés dans la démo, les rapports ont été conçus avec un groupe appliqué à la source de données. La valeur sur laquelle ce regroupement est basé est statique, dans cet exemple la chaîne "1", qui fait que toutes les lignes de données sont dans le même groupe. Pour changer facilement cette valeur, elle est basée sur un paramètre de rapport . L'expression de groupe et le tri pour le groupe sont basés sur l'expression suivante:

 = Fields (Parameters.groupedBy.Value) 

Si un champ valide de la source de données est fourni comme valeur pour le paramètre 'groupedBy', le rapport divisera les lignes en groupes en fonction de t champ de chapeau. Lorsque la valeur par défaut 1 est fournie, toutes les lignes vont dans le même groupe.

Pour que le rapport lui-même s'adapte mieux aux changements de regroupement appliqué, certaines sections et certains éléments ont une mise en forme conditionnelle pour les masquer. Par exemple. l'en-tête de groupe du rapport de grille n'est visible que lorsqu'un groupement est appliqué.

En savoir plus et essayer par vous-même

Vous voulez l'essayer par vous-même? Vous pouvez en savoir plus sur l'interface utilisateur Telerik pour Blazor et Telerik Reporting et démarrer des essais gratuits en suivant les liens ci-dessous, et n'oubliez pas que le code source de ce projet est disponible sur GitHub .

Essayez Telerik Interface utilisateur pour Blazor Essayez Telerik Reporting