Progress® Telerik® Reporting R2 2017

How To: Create a Custom Parameter Editor

The article elaborates how to change the default editors for visible parameters in the HTML5 Viewer's Parameters Area.

Custom parameter editors are defined through the ParameterEditors element when creating the report viewer control. Check out the following list with the available parameter editors:

  • SingleSelectEditor

  • MultiSelectEditor

  • MultiValueEditor

  • DateTimeEditor

  • StringEditor

  • NumberEditor

  • BooleanEditor

  • DefaultEditor

  • CustomEditors

The following example illustrates how to use the Kendo DropDownList widget for a single parameter value parameter editor which also has available values:

JavaScript
function createSingleSelectEditor(placeholder, options) {
            var dropDownElement = $(placeholder).html('<div></div>');
            var parameter,
                  valueChangedCallback = options.parameterChanged,
                  dropDownList;

            function onChange() {
                var val = dropDownList.value();
                valueChangedCallback(parameter, val);
            }

            return {
                beginEdit: function (param) {

                    parameter = param;

                    $(dropDownElement).kendoDropDownList({
                        dataTextField: "name",
                        dataValueField: "value",
                        value: parameter.value,
                        dataSource: parameter.availableValues,
                        change: onChange
                    });

                    dropDownList = $(dropDownElement).data("kendoDropDownList");
                }
            };
        }
  </telerik:ReportViewer>
  ....
      <ParameterEditors>
        <SingleSelectEditor CreateEditorFunction="createSingleSelectEditor"></SingleSelectEditor>
    </ParameterEditors>
</telerik:ReportViewer>

If the predefined parameter types are not covering your scenario you can define a CustomParameterEditor. Each custom editor requires two JavaScript functions provided as attributes: MatchFunction and CreateEditorFunction.

The customMatch method accepts a report parameter to be edited as an argument and returns a boolean value which indicates whether the parameter editor is suitable for this parameter. The parameter variable exposes the properties of the report parameter like name, allowNull, availableValues, multiValue, type and etc.

The main work for creating and utilizing the parameter editor is done in the createCustomEditor method. Its purpose is to create the parameter editor UI and wire it to the parameterChanged callback when a new value is selected. The return result is a new object containing the beginEdit method which is the entry point for creating the editor from the viewer.

The following example illustrates how to use the Kendo DropDownList widget for a boolean single parameter value parameter editor which also has available values:

JavaScript
function customMatch(parameter) {
    return Boolean(parameter.availableValues)
        && !parameter.multivalue
        && parameter.type === telerikReportViewer.ParameterTypes.BOOLEAN;
}

function createCustomEditor(placeholder, options) {
    var dropDownElement = $(placeholder).html('<div></div>');
    var parameter,
          valueChangedCallback = options.parameterChanged,
          dropDownList;

    function onChange() {
        var val = dropDownList.value();
        valueChangedCallback(parameter, val);
    }

    return {
        beginEdit: function (param) {

            parameter = param;

            $(dropDownElement).kendoDropDownList({
                dataTextField: "name",
                dataValueField: "value",
                value: parameter.value,
                dataSource: parameter.availableValues,
                change: onChange
            });

            dropDownList = $(dropDownElement).data("kendoDropDownList");
        }
    };
}

Passing the parameter editor to the viewer:

  </telerik:ReportViewer>
  ....
      <ParameterEditors>
        <CustomEditors>
            <telerik:CustomParameterEditor MatchFunction="customMatch" CreateEditorFunction="createCustomEditor"></telerik:CustomParameterEditor>
        </CustomEditors>
    </ParameterEditors>
</telerik:ReportViewer>
Tip Tip

You can use any other custom UI covering the requirements of the CreateEditorFunction method.