Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

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