description: "Learn How to Create and use Custom Parameter Editors in the HTML5 ReportViewer in Telerik Reporting."

tags: how,create,custom,parameter,editor

Custom parameter editors are defined through the parameterEditors ([Report Viewer Initialization]({%slug telerikreporting/using-reports-in-applications/display-reports-in-applications/web-application/html5-report-viewer/api-reference/report-viewer-initialization%})) array passed as an option when creating the report viewer widget. Each object represents a parameter editor factory for creating editors suitable to edit a specific report parameter configuration.

Each editor is an object which contains two methods: `match` and `createEditor`.

The `match` 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, etc.

The main work for creating and utilizing the parameter editor is done in the `createEditor` 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 single parameter value parameter editor which also has available values:

{

match: function (parameter) {

// Here you can use all of the parameter properties to

// create a more specific editor

return Boolean(parameter.availableValues) && !parameter.multivalue;

},

createEditor: function (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");

}

};

}

}

<script type="text/javascript">

$("#reportViewer1").telerik_ReportViewer({

parameterEditors: [{

match: function (parameter) {

return Boolean(parameter.availableValues) && !parameter.multivalue;

},

createEditor: function (placeholder, options) {

var dropDownElement = $(placeholder).html('<div></div>'),

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");

}

};

}

}]

});

</script>