Customization - Document Viewer for Blazor Server
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 "/viewercustomization"
<h1>Document Viewer - Customization</h1>
<ul>
<li>Time part is removed for date parameter</li>
<li>Set default Zoom level to "Page Width"</li>
</ul>
<DxDocumentViewer ReportName="SampleReport" Height="1000px" Width="100%">
<DxDocumentViewerCallbacks BeforeRender="ReportingViewerCustomization.onBeforeRender"
CustomizeParameterEditors="ReportingViewerCustomization.onCustomizeParameterEditors"
/>
</DxDocumentViewer>
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;
}
}