DxDocumentViewerCallbacksBase<TModel, TEvents> Class

Base class that specifies client-side event handler functions for the Web Document Viewer and Standalone Report Parameters Panel.

Namespace: DevExpress.Blazor.Reporting

Assembly: DevExpress.Blazor.Reporting.v25.2.JSBasedControls.Common.dll

NuGet Package: DevExpress.Blazor.Reporting.JSBasedControls.Common

public class DxDocumentViewerCallbacksBase<TModel, TEvents> :
    SettingsComponent<TModel>
    where TModel : DocumentViewerCallbacksBaseModel<TEvents>, new()

Public Class DxDocumentViewerCallbacksBase(Of TModel As {DocumentViewerCallbacksBaseModel(Of TEvents), New}, TEvents As WebDocumentViewerClientSideEventsBase)
    Inherits SettingsComponent(Of TModel)

Type Parameters

Name
TModel
TEvents

Remarks

The DxDocumentViewerCallbacks class contains properties that specify JavaScript handler functions for client-side events.

View Example: Blazor Reporting - UI Customization API

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.
- wwwroot/customization.js
```
window.ViewerCustomization = {
     onCustomizeElements: function (s, e) {
        // Your code here
     }
}
```
Use the DxResourceManager.RegisterScripts() method to register the corresponding script:
- App.razor
```
<head>
    @...@
    @DxResourceManager.RegisterScripts((config) => config.Register(new DxResource("/customizations.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 the JavaScript function names as handlers of the appropriate events in the DxDocumentViewerCallbacks component:

DxDocumentViewer.razor
DxWasmDocumentViewer.razor

<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>