How to: Access the Report Designer Control (Blazor)

• Jun 10, 2024

This example demonstrates how to access the Component Model of the DxReportDesigner component that ASP.NET Core Blazor XAF applications use to display reports.

When a user customize a report at runtime, an ASP.NET Core Blazor application opens a Detail View that contains ReportDesignerViewItem. Follow the steps below to access this View Item and its component:

1. Add the DevExpress.ExpressApp.ReportsV2.Blazor NuGet package to the ASP.NET Core Blazor module project (MySolution.Module.Blazor). If your solution does not contain this project, add this package to the application project (MySolution.Blazor.Server).
2. Create a View Controller. Set its View property to DetailView and TargetViewId to the View’s identifier. The ReportsBlazorModuleV2.ReportDesignerDetailViewName constant stores this identifier.
3. In the overridden OnActivated method, call the CustomizeViewItemControl<T>(DetailView, Controller, Action<T>) method.
4. Use the ComponentModel property to access properties of the Report Designer.

File:
MySolution.Blazor.Server\Controllers\AccessReportDesignerController.cs in solutions without the ASP.NET Core Blazor-specific module project. MySolution.Module.Blazor\Controllers\AccessReportDesignerController.cs in solutions with the ASP.NET Core Blazor-specific module project.

C#

using DevExpress.ExpressApp;
using DevExpress.ExpressApp.ReportsV2.Blazor;
// ...
public class AccessReportDesignerController : ViewController<DetailView> {
    public AccessReportDesignerController() {
        TargetViewId = ReportsBlazorModuleV2.ReportDesignerDetailViewName;
    }
    protected override void OnActivated() {
        base.OnActivated();
        View.CustomizeViewItemControl<ReportDesignerViewItem>(this, CustomizeDesignerViewItem);
    }
    private void CustomizeDesignerViewItem(ReportDesignerViewItem designerDetailItem) {
        // Access the Report Viewer properties
        string reportName = designerDetailItem.ComponentModel.ReportName;
        // ...
    }
}