Customization - Document Viewer for Blazor WebAssembly Hosted
Use the DxDocumentViewerCallbacks object properties to customize the Document Viewer.
You must add JavaScript functions that use the client-side API to customize components and must specify function names as handlers of relevant 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;
}
}