The Blazor Report Designer is based on the DevExpress Web Report Designer. The Web Report Designer includes an advanced client-side API that allows you to customize UI elements and behavior. The DxReportDesignerCallbacks component exposes properties that allow you to specify JavaScript functions (client-side event handlers).
Follow these steps to customize the Blazor Report Designer using its client-side API:
Place your JavaScript code in a separate file in the wwwroot folder. Use the window object to create a namespace for your code.
window.DesignerCustomization = {
onCustomizeElements: function (s, e) {
// Your code here
}
}
Use the DxResourceManager.RegisterScripts() method to register the corresponding script:
<head>
@...@
@DxResourceManager.RegisterScripts((config) => config.Register(new DxResource("/customization.js", 900)))
@...@
</head>
Alternatively, you can add a reference to the script file in the <body> section of App.razor or Host.cshtml (the file depends on your application type).
Specify JavaScript function names as event handlers for the DxReportDesignerCallbacks component:
<DxReportDesigner ReportName="SampleReport" Height="1000px" Width="100%">
<DxReportDesignerCallbacks CustomizeElements="DesignerCustomization.onCustomizeElements" />
</DxReportDesigner>
<DxWasmReportDesigner ReportName="TestReport" Height="700px" Width="100%">
<DxWasmReportDesignerRequestOptions InvokeAction="DXXRDV"></DxWasmReportDesignerRequestOptions>
<DxReportDesignerCallbacks CustomizeExportOptions="DesignerCustomization.onCustomizeElements"></DxReportDesignerCallbacks>
</DxWasmReportDesigner>
Report Designer client-side events allow you to perform the following actions:
Customize Report Designer Elements and Actions
Respond to Opening and Saving Reports
| Event |
Description |
| ReportOpening |
Occurs when a report is about to be opened in the Report Designer. |
| ReportOpened |
Occurs when a report has been opened in the Report Designer. |
| ReportSaving |
Occurs when a report is about to be saved in the Report Designer. |
| ReportSaved |
Occurs when a report has been saved in the Report Designer. |
Customize the Save and Open Dialogs
Respond to Changing and Closing Report Tabs
| Event |
Description |
| TabChanged |
Occurs when an active report tab is changed. |
| ExitDesigner |
Occurs when the Report Designer is being closed. |
Customize Controls and Their Properties
| Event |
Description |
| CustomizeToolbox |
Enables you to customize the Toolbox. |
| ComponentAdded |
Occurs after a component has been added to the current report. |
Localize the Report Designer
| Event |
Description |
| CustomizeLocalization |
Enables you to replace the Report Designer’s localization strings with custom strings. |
Customize Parameter Editors
Customize Parameters, Groups, and Separators
| Event |
Description |
| CustomizeParameterProperties |
Allows you to customize parameters, parameter groups, parameter separators, and property editors. |
Respond to Server-Side Errors
| Event |
Description |
| OnServerError |
Occurs on the client each time a server-side error is raised. |
Initialize the Report Designer
| Event |
Description |
| BeforeRender |
Occurs before the Report Designer’s UI is initialized. |
| OnInitializing |
Occurs before the View Model is fetched from the server, and before the BeforeRender event. |
Report Designer Preview’s Events
You can also handle client-side events for the Report Designer’s integrated Document Viewer (Report Designer Preview). Callback names for the Report Designer Preview start with the “Preview” prefix.
The events listed below allow you to customize the built-in Document Viewer and respond to user actions.