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.