DevExpress JavaScript-Based Reporting Components for Blazor

This package includes DevExpress JavaScript-Based Components for Blazor Reporting. These components are built on top of DevExtreme JavaScript widgets. They support Interactive Server and Interactive WebAssembly render modes and Blazor WebAssembly Standalone apps. No ASP.NET Core backend or MVC controllers are required.

Included Components

• Document Viewer (DxDocumentViewer): Displays an interactive document preview generated from a DevExpress Report. The Document Viewer allows users to preview data, change report parameters, print, and export the resulting document.
• End-User Report Designer (DxReportDesigner): Allows users to create and modify reports using a drag-and-drop interface. Supports various data source types. Includes a fully functional Document Viewer to preview and export reports.
• Standalone Report Parameters Panel (DxReportParametersPanel): A panel with report parameter editors. Use this component to submit report parameter values, programmatically create a report based on the specified values, and then export or email it without displaying a preview to users.

Examples

Example 1: Add a Document Viewer to a Blazor Web App

1. Install the following DevExpress packages:

   dotnet add package DevExpress.Blazor.Reporting.JSBasedControls
   dotnet add package DevExpress.AspNetCore.Reporting
   

2. Register DevExpress Resources.

3. Add a Report Name Resolution Service.

4. Create a Sample Report.

5. Add a DxDocumentViewer component to a Razor page:

   @page "/documentviewer"
   @rendermode InteractiveServer
   
   <DxDocumentViewer ReportName="TestReport" Height="1000px" Width="100%">
       <DxDocumentViewerTabPanelSettings Width="340" />
   </DxDocumentViewer>
   

Example 2: Add an End-User Report Designer to a Blazor Web App

1. Install the following DevExpress packages:

   dotnet add package DevExpress.Blazor.Reporting.JSBasedControls
   dotnet add package DevExpress.AspNetCore.Reporting
   

2. Register DevExpress Resources.

3. Add a Report Storage.

4. Create a Sample Report.

5. Add a DxReportDesigner component to a Razor page:

   @page "/reportdesigner"
   @rendermode InteractiveServer
   
   <DxReportDesigner ReportName="TestReport" Height="1000px" Width="100%">
   </DxReportDesigner>
   

Example 3: Add a Standalone Report Parameters Panel to a Blazor Web App

1. Install the following DevExpress packages:

   dotnet add package DevExpress.Blazor.Reporting.JSBasedControls
   dotnet add package DevExpress.AspNetCore.Reporting
   

2. Register DevExpress Resources.

3. Add a Sample Report.

4. Add a Report Resolution Service.

5. Add a DxReportParametersPanel component to a Razor page:

   @page "/panel"
   @rendermode InteractiveServer
   
   <DxReportParametersPanel ReportName="TestReport" Height="1000px" Width="650px">
   </DxReportParametersPanel>
   

Evaluation Period, Pricing Options, and Licensing Terms

Whether you own a license or want to start a 30-day evaluation, download and register your DevExpress license key. To obtain your key, sign in to the DevExpress Download Manager with an existing DevExpress.com account or create a free account. For key registration instructions, see License Key for DevExpress Products.

If you purchase a license after evaluating a product, re-register your updated DevExpress license key to remove evaluation warnings and messages.

This package is included in the following commercial subscriptions:

• DevExpress Reporting Subscription
• DevExpress ASP.NET Subscription
• DevExpress DXperience Subscription
• DevExpress Universal Subscription

See DevExpress Subscriptions & Licensing for subscription comparison tables, purchasing FAQ, and licensing information.

Related Components/Packages

DevExpress.Blazor.Reporting.JSBasedControls.WebAssembly — JavaScript-based Reporting Components for Blazor WebAssembly Hosted applications (DxWasmDocumentViewer, DxWasmReportDesigner, and DxWasmReportParametersPanel). These components require an ASP.NET Core backend with MVC controllers.

dotnet add package DevExpress.Blazor.Reporting.JSBasedControls.WebAssembly

DevExpress.AIIntegration.AspNetCore.Reporting — AI-powered Summarize, Translate, Prompt-to-Report, Prompt-to-Expression, Localization, and Test Data extensions for the Document Viewer and Report Designer.

dotnet add package DevExpress.AIIntegration.AspNetCore.Reporting

Demos

• DevExpress Blazor Demos
• DevExpress Reports Demos on GitHub

Documentation

• Blazor Reporting Overview
• JavaScript-Based Document Viewer
• JavaScript-Based Report Designer
• JavaScript-Based Standalone Report Parameters Panel

Software Bill of Materials (SBOM)

To access SBOM files for DevExpress packages, please refer to the following article: Software Bill of Materials (SBOM) for DevExpress .NET assemblies/NuGet packages, JavaScript, VCL and other redistributable artifacts.

See Also: Information Security | Security - What You Need to Know

Useful Online Resources

• www.devexpress.com
• DevExpress Support Center
• DevExpress Blogs