xtrareports-404135-web-reporting-blazor-reporting-web-report-designer-customization-client-side-events.md
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.
Use the DxResourceManager.RegisterScripts() method to register the corresponding script:
Specify JavaScript function names as event handlers for the DxReportDesignerCallbacks component:
Report Designer client-side events allow you to perform the following actions:
| Event | Description |
|---|---|
| CustomizeWizard | Enables you to customize the Report Wizard and Data Source Wizard. |
| CustomizeElements | Enables you to customize UI elements. |
| CustomizeMenuActions | Allows you to customize menu actions. |
| CustomizeFieldListActions | Enables you to customize actions in the Field List. |
| 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. |
| Event | Description |
|---|---|
| CustomizeOpenDialog | Enables you to customize the Open Report dialog. |
| CustomizeSaveDialog | Enables you to customize the Save dialog. |
| CustomizeSaveAsDialog | Enables you to customize the Save Report dialog. |
| Event | Description |
|---|---|
| TabChanged | Occurs when an active report tab is changed. |
| ExitDesigner | Occurs when the Report Designer is being closed. |
| Event | Description |
|---|---|
| CustomizeToolbox | Enables you to customize the Toolbox. |
| ComponentAdded | Occurs after a component has been added to the current report. |
| Event | Description |
|---|---|
| CustomizeLocalization | Enables you to replace the Report Designer’s localization strings with custom strings. |
| Event | Description |
|---|---|
| CustomizeParameterEditors | Enables you to add custom editors for report parameters. |
| PreviewCustomizeParameterLookUpSource | Allows you to customize look-up report parameter values. |
| Event | Description |
|---|---|
| CustomizeParameterProperties | Allows you to customize parameters, parameter groups, parameter separators, and property editors. |
| Event | Description |
|---|---|
| OnServerError | Occurs on the client each time a server-side error is raised. |
| 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. |
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.
| Event | Description |
|---|---|
| PreviewClick | Occurs when a report document is clicked. |
| PreviewCustomizeElements | Enables you to customize UI elements. |
| PreviewCustomizeMenuActions | Allows you to customize toolbar actions. |
| PreviewCustomizeExportOptions | Allows you to customize export formats and corresponding export options. |
| PreviewDocumentReady | Occurs after a report has been switched to Print Preview. |
| PreviewEditingFieldChanged | Occurs each time an edit field’s value changes. |
| PreviewParametersReset | Occurs after report parameter values are reset to their default values. |
| ParametersSubmitted | Occurs after report parameter values are submitted. |