Customize Parameter Editors

Feb 09, 2026
2 minutes to read

This topic shows how to customize the built-in parameter editors in the JavaScript-based Document Viewer.

View Example: Blazor Reporting - UI Customization API

Change the Editor Options

Handle the CustomizeParameterEditors event and use the info.editor.extendedOptions property to customize the DateBox editor options.

wwwroot/customization.js
App.razor
Viewer.razor

javascript

window.ViewerCustomization = {
// Remove the time portion from the DateTime parameter editor
    onCustomizeParameterEditors: function(s, e) {
        if (e.parameter.type === "System.DateTime") {
            e.info.editor = $.extend({}, e.info.editor);
            e.info.editor.extendedOptions = $.extend(e.info.editor.extendedOptions || {}, { type: 'date' });
        }
    }
}

cshtml

<head>
    @...@
    @DxResourceManager.RegisterScripts((config) => config.Register(new DxResource("/customization.js", 900)))
    @...@
</head>

razor

<DxDocumentViewer ReportName="SampleReport" Height="1000px" Width="100%">
    <DxDocumentViewerCallbacks CustomizeParameterEditors="ViewerCustomization.onCustomizeParameterEditors" />
</DxDocumentViewer>

Add a Validation Rule

Handle the CustomizeParameterEditors event and add a validation rule to the editor’s validationRules array.

wwwroot/customization.js
App.razor
Viewer.razor

javascript

window.ViewerCustomization = {
    // Remove the time portion from the DateTime parameter editor
    onCustomizeParameterEditors: function(s, e) {
        if (e.parameter.type === 'System.DateTime') {
            e.info.editor = $.extend({}, e.info.editor);
            e.info.editor.extendedOptions =
                $.extend(e.info.editor.extendedOptions || {},
                    { type: 'date' }, { displayFormat: 'dd-MMM-yyyy' });
            var validationRule = {
                type: "range",
                min: new Date(2000, 0, 1),
                message: "We do not retain data prior to the year 2000."
            };
            e.info.validationRules = [validationRule];
        }
    }
}

cshtml

<head>
    @...@
    @DxResourceManager.RegisterScripts((config) => config.Register(new DxResource("/customization.js", 900)))
    @...@
</head>

razor

<DxDocumentViewer ReportName="SampleReport" Height="1000px" Width="100%">
    <DxDocumentViewerCallbacks CustomizeParameterEditors="ViewerCustomization.onCustomizeParameterEditors" />
</DxDocumentViewer>

The customized parameter editor appears as follows: