New to Telerik Reporting? Download free 30-day trial

Create custom NumberEditor for integer parameter values with kendoNumericTextBox widget


Product Progress® Telerik® Reporting
Viewer HTML5 Viewer


The knowledge based 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 method when creating the report viewer widget. In this article a NumberEditor implementing kendoNumericTextBox widget will be used.


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

function createNumberEditor(placeholder, options) {
    $(placeholder).html('<input type="number"/>');
    var inputElement = $(placeholder).find("input[type=number]");
    var parameter,
        valueChangedCallback = options.parameterChanged,
            function onChange() {
            var dtv = inputBox.value();
            valueChangedCallback(parameter, dtv);

        return {
            beginEdit: function (param) {
                parameter = param;

                    value: parameter.value,
                    dataSource: parameter.availableValues,
                    change: onChange

                inputBox = $(inputElement).data("kendoNumericTextBox");
                    editors => editors

You can download the sample application from here. Note that it is a MVC application with HTML5 MVC Report Viewer.

See Also

In this article