DxDocumentViewerCallbacksBase<TModel, TEvents>.CustomizeParameterEditors Property

Specifies the handler for the CustomizeParameterEditors client-side event that allows you to specify the parameter editor for the report parameter.

Namespace : DevExpress.Blazor.Reporting

Assembly : DevExpress.Blazor.Reporting.v25.2.JSBasedControls.Common.dll

NuGet Package : DevExpress.Blazor.Reporting.JSBasedControls.Common

csharp

[Parameter]
public string CustomizeParameterEditors { get; set; }

<Parameter>
Public Property CustomizeParameterEditors As String

Property Value

Type	Description
String

The name of a JavaScript function used to handle the CustomizeParameterEditors event.

Remarks

A report can let users specify parameter values and use them to create a document displayed in a Document Viewer. The Web Document Viewer automatically selects the editor type used to edit parameter values.

The CustomizeParameterEditors event allows you to individually specify the parameter editor for each parameter.

The handler function receives two parameters - the first parameter is the client-side Document Viewer (the event sender) and the second parameter is an object with the following properties and methods:

parameterAn object that stores the parameter information.infoAn object that stores information required to serialize a parameter editor.

The following example removes the time part from the calendar editor:

View Example: Blazor Reporting - UI Customization API

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>