Provide Custom Editors for Report Parameters

This document demonstrates how to change an editor used to modify a report parameter value in the HTML5 Document Viewer.

Tip

The Document Viewer displays default value editors according to report parameter types (Parameter.Type property values).

For this example to work properly, a report displayed in the Document Viewer should contain an integer type categoryID parameter.

Do the following to provide a custom dxNumberBox parameter editor with the enabled spin buttons and limited minimum and maximum values:

  1. Define a custom template for a parameter editor in the following manner:

    <script type ="text/html" id="categoryID-custom-editor">
        <div data-bind="dxNumberBox: { value: value, showSpinButtons: true, min: 1, max: 8 }"> </div>
    </script>
    
  2. Handle the CustomizeParameterEditors event of the Document Viewer's client-side instance. In the event handler, check the event argument's parameter property to identify the required parameter and provide a header variable with the name of the previously created template using the info.editor property.

    customizeParameterEditors(s, e) {
        if (e.parameter.name == "categoryID") {
            e.info.editor = { header: 'categoryID-custom-editor' };
        }            
    }
    

The following image illustrates the result:

ReportParams_CustomEditorsResult2

See Also