skills.rest
AleksaRistic216
AleksaRistic216COMMUNITY
Explore all skills by this author →
GitHub

devexpress-reporting-angular

Integrates DevExpress Document Viewer and Report Designer components into Angular applications with ASP.NET Core backends.

Updated Dec 11, 2025
Search Tags:#typescript#angular#reporting#asp.net core#devexpress#report viewer#report designer
One-click install
npx skills add https://github.com/AleksaRistic216/dotnet-playground --skill devexpress-reporting-angular-aleksaristic216
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: devexpress-reporting-angular
Source: https://github.com/AleksaRistic216/dotnet-playground/tree/main/.github/skills/reporting/devexpress-reporting-angular
Command: npx skills add https://github.com/AleksaRistic216/dotnet-playground --skill devexpress-reporting-angular-aleksaristic216

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires devextreme, devextreme-angular, @devexpress/analytics-core, devexpress-reporting-angular, and includes references (resource) components.

What problem does it solve? Setting up DevExpress Reporting in an Angular SPA involves coordinating npm packages, ASP.NET Core backend configuration, CORS policies, CSS imports, and component callbacks, where version mismatches or missing styles cause blank pages and runtime failures. ## Core Features & Use Cases - Document Viewer Integration: Add the dx-report-viewer component with request options, export settings, search settings, and mobile mode. - Report Designer Integration: Embed the dx-report-designer with wizard settings, data source restrictions, and designer model configuration. - Toolbar and Export Customization: Hide toolbar buttons via CustomizeMenuActions, filter export formats via CustomizeExportOptions, and pass report parameters through URLs or the ParametersInitialized event. - Use Case: A developer needs to embed a read-only report viewer in an Angular 19 app backed by an ASP.NET Core API, showing only PDF export and passing a filter parameter from a custom input field. ## Quick Start Ask the assistant to add a DevExpress report viewer to your Angular application connected to your ASP.NET Core backend.

Frequently Asked Questions about devexpress-reporting-angular

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a DevExpress report viewer to an Angular app?▼

Install devextreme, devextreme-angular, @devexpress/analytics-core, and devexpress-reporting-angular npm packages, then import DxReportViewerModule into a component with ViewEncapsulation.None. Bind reportUrl and configure dxrv-request-options with your backend host and the /DXXRDV invoke action.

How to hide export formats in the DevExpress Angular document viewer?▼

Handle the CustomizeExportOptions callback via dxrv-callbacks and call event.args.HideFormat with ExportFormatID values such as XLS, XLSX, or CSV. Import ExportFormatID from devexpress-reporting/dx-webdocumentviewer; do not use CustomizeMenuActions for format filtering.

Does devexpress-reporting-angular require a specific Angular version?▼

Yes, it requires Angular 19 or later with standalone components and Node.js 18.13 or later. Frontend npm package versions must exactly match the backend DevExpress.AspNetCore.Reporting NuGet package version to avoid runtime failures.

Why does the DevExpress report viewer show a blank page in Angular?▼

A blank page usually results from missing CSS imports or incorrect ViewEncapsulation. Ensure all four required CSS files are listed in styleUrls and the host component sets ViewEncapsulation.None so DevExpress styles apply correctly.

How do I pass parameters to a DevExpress report from Angular?▼

Encode parameter values in the reportUrl string and parse them in a backend IReportProvider implementation, or handle the ParametersInitialized event via dxrv-callbacks to call parametersModel.setParameterValue and event.args.Submit programmatically.

Why am I getting CORS errors with the Angular report viewer?▼

The Angular SPA runs on a different port than the ASP.NET Core backend, so the backend must configure CORS. Add a CORS policy with AddCors and call UseCors after UseRouting but before UseEndpoints in Program.cs.

Related Skills

Explore More Software Engineering Skills→
miiitchmiiitch
1

ezscim

Guides integration of SCIM 2.0 provisioning endpoints into ASP.NET Core applications.

Community
Intermediate
esassocesassoc
6

check-migration-status

Audit MVC to Angular and ASP.NET Core migration progress by comparing controllers, views, endpoints, and routes.

Official
Intermediate
DevExpressDevExpress
39

devexpress-visual-studio-rider-report-design

Generate designer-serializable XtraReport layout code for Visual Studio and JetBrains Rider.

Official
Intermediate
DevExpressDevExpress
39

devexpress-reports-blazor

Integrate DevExpress Report Viewer and Designer into Blazor applications.

Official
Advanced