The Blazor Document Viewer is based on the DevExpress Web Document Viewer. The Web Document Viewer includes an advanced client-side API that allows you to customize UI elements and behavior. The DxDocumentViewerCallbacks component exposes properties that allow you to specify JavaScript functions (client-side event handlers).
Follow these steps to customize the Blazor Document Viewer 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.ViewerCustomization = {
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 DxDocumentViewerCallbacks component:
<DxDocumentViewer ReportName="SampleReport" Height="1000px" Width="100%">
<DxDocumentViewerCallbacks CustomizeElements="ViewerCustomization.onCustomizeElements" />
</DxDocumentViewer>
<DxWasmDocumentViewer ReportName="TestReport" Height="700px" Width="100%">
<DxWasmDocumentViewerRequestOptions InvokeAction="DXXRDV"></DxWasmDocumentViewerRequestOptions>
<DxDocumentViewerCallbacks CustomizeExportOptions="ViewerCustomization.onCustomizeElements"></DxDocumentViewerCallbacks>
</DxWasmDocumentViewer>
Document Viewer Client-Side events allow you to perform the following actions:
| Event |
Description |
| CustomizeElements |
Allows you to customize the Web Document Viewer’s UI elements (Parameter Panel, Right Panel, Toolbar). |
| CustomizeMenuActions |
Enables you to customize the Web Document Viewer’s toolbar. |
| CustomizeExportOptions |
Allows you to customize the Web Document Viewer’s available export formats and corresponding export options. |
Customize Parameter Editors
Manage Report Parameters
| Event |
Description |
| ParametersInitialized |
Allows you to get the client-side parameter values when they are initialized and modify them. |
Respond to Parameter Reset and Submission
| Event |
Description |
| ParametersReset |
Occurs after report parameter values are reset to their default values. |
| ParametersSubmitted |
Occurs after report parameter values are submitted. |
Respond to Document Loading
| Event |
Description |
| DocumentReady |
Occurs after the Web Document Viewer loads a report document. |
Manage Interactivity
Localize the Document Viewer
| Event |
Description |
| CustomizeLocalization |
Enables you to replace the Web Document Viewer’s localization strings with custom strings. |
Respond to Server-Side Errors
| Event |
Description |
| OnServerError |
Occurs on the client each time a server-side error is raised. |
Initialize the Document Viewer
| Event |
Description |
| BeforeRender |
Occurs before the Web Document Viewer UI is initialized. |
| OnInitializing |
Occurs before the View Model is fetched from the server, and before the BeforeRender event. |
See Also