WebDocumentViewerClientSideEventsBuilder.CustomizeParameterEditors(String) Method

Specifies the JavaScript function that handles the client-side CustomizeParameterEditors event.

Namespace: DevExpress.AspNetCore.Reporting.WebDocumentViewer

Assembly: DevExpress.AspNetCore.Reporting.v21.1.dll

Declaration

public WebDocumentViewerClientSideEventsBuilder CustomizeParameterEditors(
    string callback
)

Parameters

Name Type Description
callback String

The name of a JavaScript function or entire JavaScript function code that runs when the CustomizeParameterEditors event occurs.

Returns

Type Description
WebDocumentViewerClientSideEventsBuilder

A WebDocumentViewerClientSideEventsBuilder that can be used for method chaining.

Remarks

The client-side CustomizeParameterEditors event allows you to customize parameter editors.

The handler function receives two parameters: the first parameter is the client-side DocumentViewer that exposes the IPreviewModel interface (or the JSReportViewer object), the second is an object with the following properties:

parameter
An object that stores information about a parameter.
info
An object that stores information required to serialize a parameter editor.

You can use two methods to specify a custom editor - use a custom template or modify the editor’s extended options.

Example: Use Custom Template

Define a custom HTML template and use the info.editor property to specify a header variable with the template name.

The following example implements a custom dxNumberBox parameter editor with spin buttons limited by minimum and maximum values.

Custom Parameter Editor NumberBox

<script type ="text/html" id="custom-editor"> 
    <div data-bind="dxNumberBox: { value: value, showSpinButtons: true, min: 1, max: 8 }"> </div> 
</script> 

<script type="text/javascript" id="script"> 
    function customizeParameterEditors(s, e) {
      if (e.parameter.type == "System.Int32") {
          e.info.editor = { header: 'custom-editor' };
      }    
    }
</script> 

@{
    var documentViewer = Html.DevExpress().WebDocumentViewer("webDocumentViewer1")
        .Height("1000px")
        .Bind(Model.Report)
        .ClientSideEvents(configure => { configure.CustomizeParameterEditors("customizeParameterEditors"); });;
}
@documentViewer

Example: Customize Editor Options

Use the info.editor.extendedOptions property to customize the DevExtreme component’s options.

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

<script type="text/javascript" id="script"> 
    function customizeParameterEditors(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' });
      }  
    }
</script> 

@{
    var documentViewer = Html.DevExpress().WebDocumentViewer("webDocumentViewer1")
        .Height("1000px")
        .Bind(Model.Report)
        .ClientSideEvents(configure => { configure.CustomizeParameterEditors("customizeParameterEditors"); });;
}
@documentViewer

Example: Validate Parameter Values

DevExtreme editors used in the Parameters panel allow you to validate the values that the user enters and make the parameter “required”.

The following code does not allow the user to leave the parameter1 editor blank, and accepts only even numbers.

function onCustomizeParameterEditors(s, e) {
    if (e.parameter.name === 'parameter1') {
        e.info.validationRules = [{
            type: 'custom',
            validationCallback: validateNumber,
            message: 'Only even numbers are allowed!'
        }];
    }
};
function validateNumber(e) {
    return (e.value != '') && (e.value % 2 == 0)
}; 

For more information on custom validation rules for DevExtreme editors, review the following help topic: CustomRule.

See Also