Customization - Document Viewer for Blazor WebAssembly
Use the DxDocumentViewerCallbacks object properties to customize the Document Viewer.
You must add the JavaScript functions that use the client-side API to customize components, and specify the function names as handlers of the appropriate events.
Remove the Time Part in the DateTime Editor
The following code removes the time part in the DateTime editor and specifies the page zoom factor:
@page "/documentviewer"
<h1>Document Viewer - Customization</h1>
<ul>
<li>Parameter DateTime Editor - the time part is removed</li>
<li>Zoom level is set to "Page Width"</li>
</ul>
<DxWasmDocumentViewer ReportName="TestReport" Height="calc(100vh - 130px)" Width="100%">
<DxDocumentViewerTabPanelSettings Width="340" />
<DxWasmDocumentViewerRequestOptions InvokeAction="DXXRDV"></DxWasmDocumentViewerRequestOptions>
<DxDocumentViewerCallbacks BeforeRender="ReportingViewerCustomization.onBeforeRender"
CustomizeParameterEditors="ReportingViewerCustomization.onCustomizeParameterEditors"
/>
</DxWasmDocumentViewer>
The following code snippet contains JavasScript functions whose names are specified as event handlers on the Razor pages above:
window.ReportingViewerCustomization = {
onCustomizeParameterEditors: function(s, e) {
//Remove time part from the DateTime parameter editor
if(e.parameter.type === "System.DateTime") {
e.info.editor = $.extend({}, e.info.editor);
e.info.editor.extendedOptions = $.extend(e.info.editor.extendedOptions || {}, { type: 'date' });
}
},
//Change default Zoom level
onBeforeRender: function(s, e) {
//-1: Page Width
//0: Whole Page
//1: 100%
e.reportPreview.zoom(-1);
}
}