New to Telerik Reporting? Download free 30-day trial

Create custom NumberEditor for integer parameter values with kendoNumericTextBox widget

Environment

Product Progress® Telerik® Reporting
Viewer HTML5 Viewer

Description

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.

Solution

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,
        inputBox;
            function onChange() {
            var dtv = inputBox.value();
            valueChangedCallback(parameter, dtv);
        }

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

                $(inputElement).kendoNumericTextBox({
                    value: parameter.value,
                    dataSource: parameter.availableValues,
                    change: onChange
                });

                inputBox = $(inputElement).data("kendoNumericTextBox");
            }
        }
}
@(Html.TelerikReporting().ReportViewer()
        .Id("reportViewer1")
        .ParameterEditors(
                    editors => editors
                        .NumberEditor("createNumberEditor")
            )
)

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