Fermer

mai 31, 2022

Telerik Reporting & Kendo UI pour Angular—Symbiose parfaite

Telerik Reporting & Kendo UI pour Angular—Symbiose parfaite


Voyons comment intégrer l’interface utilisateur de Kendo pour Angular Data Grid avec Telerik Reporting Angular Viewer.

Angulaire est l’une des meilleures plates-formes pour la création d’applications Web mobiles et de bureau. Certains des avantages qu’il apporte sont la haute qualité de l’application, un processus de développement rapide, un développement multiplateforme efficace et bien d’autres.

Dans le Blazor DataGrid rencontre Blazor Report Viewer article de blog, vous avez vu comment transmettre des données du
Interface utilisateur Telerik pour Blazor Grid au Telerik Blazor Report Viewer. Une approche similaire a également été proposée dans le Intégrer de beaux rapports dans vos applications React. Dans celui-ci, le Grille de données Kendo React fournissait le Telerik Reporting React Viewer avec des données.

Dans cet article de blog, nous poursuivrons la série montrant l’interaction entre les différents produits Progress. Il est maintenant temps de rejoindre le Interface utilisateur de Kendo pour la grille de données angulaire avec le Telerik Reporting Angular Viewer. Commençons!

La mise en œuvre se décompose en trois parties principales :

Interface utilisateur de Kendo pour la grille de données angulaire

La Interface utilisateur de Kendo pour la grille de données angulaire comprend un ensemble complet de fonctionnalités prêtes à l’emploi couvrant tout, de la pagination, du tri, du filtrage, de l’édition et du regroupement à la virtualisation des lignes et des colonnes, en passant par l’exportation au format PDF et Excel et la prise en charge de l’accessibilité.

La grille est construite à partir de zéro et spécifiquement pour Angular, vous obtenez donc un contrôle haute performance qui offre des vitesses ultra-rapides, s’intègre étroitement à votre application et au reste de l’interface utilisateur Kendo pour les composants angulaires, et est hautement personnalisable.

Pour le configurer :

  1. Créez l’application Angular et installez le package de Grid (retrouvez plus de détails dans le Premiers pas avec l’interface utilisateur de Kendo pour la grille angulaire article):
    ng add @progress/kendo-angular-grid
  2. Insérez le fichier speakers.ts qui contient les objets haut-parleurs. Le fichier se trouve dans l’exemple de projet à la fin de l’article.
  3. Ajoutez les composants Grid et MultiSelect.
  4. Mettez en œuvre les méthodes nécessaires au filtrage des données dans la grille lorsque certains filtres sont modifiés :
import { Component, ViewChild } from '@angular/core';
import { filterBy, CompositeFilterDescriptor } from '@progress/kendo-data-query';
import { speakersData } from '../data/speakers';

const distinctCategories = data => data
    .filter((x, idx, xs) => xs.findIndex(y => y.DaySpeaking === x.DaySpeaking) === idx);
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html'
}
)

export class AppComponent {
    public filter: CompositeFilterDescriptor = null;
    public gridData: any[] = filterBy(speakersData, this.filter);
    public categories: any[] = distinctCategories(speakersData);
    public filterChange(filter: CompositeFilterDescriptor): void {
        this.filter = filter;
        var filteredData = filterBy(speakersData, filter);
        this.gridData = filteredData;
    }
}

Et nous avons ici le premier résultat de notre implémentation :

Continuons avec la partie Telerik Reporting.

Service REST de rapport Telerik

Nos visualiseurs de rapports HTML nécessitent une instance en cours d’exécution du Service REST de rapport Telerik ou la Serveur de rapports Telerik pour afficher les rapports. Le service Telerik Reporting REST fournit une API sur HTTP au moteur de génération de rapports, ce qui permet d’exporter des documents de rapport dans tous les formats de rendu pris en charge.

Le projet qui héberge le service REST peut cibler .NET Framework ou .NET Core. Pour cet exemple, nous choisirons le projet de démonstration .NET 6 avec le service REST dans le dossier d’installation de Telerik Reporting. Le projet est dans le Exemples -> CSharp -> .NET 6 -> ReportingRestServiceCorsDemo sous-dossier.

Toutes les étapes nécessaires à la création du service Telerik Reporting REST se trouvent dans le Comment héberger le service de rapports dans ASP.NET Core dans .NET 6 avec une API minimale article.

Vous n’avez pas encore installé Telerik Reporting ? Pas de soucis, il vous suffit de commencer votre essai gratuit. Vous trouverez ce projet et de nombreux autres exemples dans le dossier d’installation.

  1. Copiez le projet de service REST et placez-le dans un emplacement séparé.
  2. Ouvrez le projet et ajoutez un nouveau dossier appelé « Rapports.”
  3. Copiez le rapport des conférenciers qui se trouve dans le Concepteur de rapports -> Exemples sous-dossier du dossier d’installation de Telerik Reporting.
  4. Dans Program.cs, modifiez le reportsPath le service recherchera donc le rapport dans le dossier nouvellement créé :
var reportsPath = System.IO.Path.Combine(builder.Environment.ContentRootPath, "Reports");
  1. Ouvrez le rapport des conférenciers et remplacez le Source de données d’objet avec un vide Source de données JSON. Met le La source de données propriété du tableau croisé comme JsonDataSource. Plus tard, nous définirons le contenu du JSON DataSource à partir de l’interface utilisateur de Kendo pour Angular Data Grid.
  2. Nous transférerons les données en utilisant un paramètre de rapport. Ajoutez-en un nouveau appelé « dataParameter ». Il doit être de type String.
  3. Ajouter un nouveau Obligatoire au tableau croisé comme suit :
    Chemin de propriété: DataSource.Source

    Expression: = Parameters.dataParameter.Value

  1. Enregistrez le rapport et exécutez le projet de service REST. Pour vous assurer que le service fonctionne, exécutez l’application et accédez à {applicationRoot}/api/reports/version, qui renverra la version utilisée de Telerik Reporting.

Une autre option consiste à accéder à {applicationRoot}/api/reports/formats. Il doit renvoyer un JSON représentant les extensions de rendu prises en charge. Plus de détails sur cette approche peuvent être trouvés dans le Comment définir le contenu de JsonDataSource via le paramètre de rapport Article de la base de connaissances.

Et maintenant nous sommes prêts pour le point culminant de notre solution – ajouter le Visualiseur de rapport angulaire et transmettre les données de la grille au rapport.

Telerik Reporting Visionneuse de rapports angulaires

La Telerik Reporting Angular Viewer composant est construit au-dessus du Visionneuse de rapports HTML5, qui est également la base de tous les autres visualiseurs de rapports des technologies Web. Ajoutons-le à notre application :

  1. Installez les packages jQuery et Angular Viewer :
    – npm install jquery
    – npm install @progress/telerik-angular-report-viewer
  2. Ajoutez le composant de visionneuse :
    //report-viewer.component.ts
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { TelerikReportViewerComponent } from '@progress/telerik-angular-report-viewer';
import { StringResources } from './stringResources';
import { speakersData } from '../../data/speakers';

@Component({
    selector: 'report-viewer',
    templateUrl: './report-viewer.component.html',
    styleUrls: ['./report-viewer.component.css']
})

export class ReportViewerComponent implements AfterViewInit {
    @ViewChild('viewer1', {}) viewer: TelerikReportViewerComponent;
    speakerObjects = JSON.stringify(speakersData);
    title = "Report Viewer";
    viewerContainerStyle = {
        width: '100%',
        height: '1000px',
        ['font-family']: 'ms sans serif'
    };
}
    //report-component.html
<tr-viewer #viewer1
 [containerStyle]="viewerContainerStyle" 
 [serviceUrl]="'http://localhost:59655/api/reports/'"
 [reportSource]="{
        report: 'Speakers Report.trdp',
        parameters: {
            'DataParameter' : speakerObjects
        }
    }" 
 [viewMode]="'INTERACTIVE'"
 [scaleMode]="'SPECIFIC'"
 [scale]="1.0"
 [ready]="ready"
 [viewerToolTipOpening]="viewerToolTipOpening"
 [enableAccessibility]="false">
</tr-viewer>

    Plus de détails sur la façon d’ajouter la visionneuse de rapport angulaire à votre application peuvent être trouvés dans le Comment utiliser Angular Report Viewer avec Angular CLI article.

  3. Enfin, avec le morceau de code suivant, nous enverrons les données de la grille au rapport :
export class AppComponent {
    @ViewChild('reportViewer1', {}) viewer: ReportViewerComponent;

    public get telerikReportViewer() {
        return this.viewer.viewer;
    }
...

    public setViewerData(data) {
        var rs = {
            report: this.telerikReportViewer.reportSource.report,
            parameters: { DataParameter: data }
        };
        this.telerikReportViewer.setReportSource(rs);
    }

    public filterChange(filter: CompositeFilterDescriptor): void {
        . . .
        this.setViewerData(JSON.stringify(filteredData));
    }
}

Nous sommes maintenant prêts avec notre chef-d’œuvre. C’est cool, n’est-ce pas ?

Code source

Le code source de ce projet se trouve dans notre Référentiel GitHub. Pour utiliser les produits Telerik ou Kendo UI, vous devrez fournir une clé de licence. Cela peut se faire par le biais d’un essai gratuit ou lorsque vous possédez la licence commerciale (détails ci-dessous).

Vous voulez essayer Telerik Reporting ?

Rapports Telerik est un outil de création de rapports intégré .NET complet, facile à utiliser et puissant pour les applications Web et de bureau qui prend en charge : Blazor, ASP.NET Core, ASP.NET MVC, ASP.NET AJAX, HTML5/JS, Angular, React, Vue , WPF, WinForms et UWP. Également disponible dans le cadre de notre Telerik DevCraft bundle, Reporting vous permet de créer, de styliser, d’afficher et d’exporter des rapports riches, interactifs et réutilisables pour présenter de manière attrayante des données analytiques et des données commerciales. Ajoutez des rapports à n’importe quelle application métier via les contrôles de la visionneuse de rapports. Exportez les rapports prêts vers plus de 15 formats.

Si vous ne l’avez toujours pas essayé, vous pouvez commencer un essai gratuit pour regarder de plus près. Nous fournissons également un service d’assistance dont nous sommes fiers et des ressources qui vous aideront tout au long du processus.

Vous voulez essayer l’interface utilisateur de Kendo pour Angular ?

Interface utilisateur de Kendo pour Angular fournit des composants d’interface utilisateur pour répondre à toutes les exigences des applications en matière de traitement des données, de performances, d’expérience utilisateur, de conception, d’accessibilité et bien plus encore. Découvrez-le à travers un essai gratuit ou dans le cadre du Telerik DevCraft paquet.

Le meilleur outil 2023 pour ta croissance Instagram !



Source link