Optimizing ComboBox Loading with Large Data Sources in HTML5 Report Viewer
Environment
| Product | Progress® Telerik® Reporting | Kendo UI for jQuery |
| Version | 19.2.25.1001 | 2025.1.227 |
Description
I am experiencing performance issues with the ComboBox parameter editor in the HTML5 Report Viewer. When the ComboBox is bound to a large dataset, the UI becomes slow. Clicking the ComboBox to open or select a value results in a noticeable delay. I need a solution to optimize the loading of the ComboBox when handling large data sources.
Solution
To address slow performance with large datasets, implement a custom parameter editor using the Kendo UI for jQuery ComboBox with virtualization. Virtualization renders records dynamically as you scroll, significantly improving load times.
Configure the parameterEditors option in the HTML5 Report Viewer to define the custom parameter editor:
<script type="text/javascript">
$(document).ready(function () {
$("#reportViewer1")
.telerik_ReportViewer({
// ...
parameterEditors: [{
match: function (parameter) {
return Boolean(parameter.availableValues);
},
createEditor: function (placeholder, options) {
const comboBoxElement = $(placeholder).html('<input />');
const valueChangedCallback = options.parameterChanged;
let parameter;
let comboBox;
function onChange() {
const val = comboBox.value();
valueChangedCallback(parameter, val);
}
return {
beginEdit: function (param) {
parameter = param;
$(comboBoxElement).kendoComboBox({
dataTextField: "name",
dataValueField: "value",
value: parameter.value,
dataSource: {
data: parameter.availableValues,
serverFiltering: false
},
virtual: {
itemHeight: 26,
valueMapper: function (options) {
// Optional: map value to index if needed
options.success([options.value]);
}
},
height: 400,
change: onChange
});
comboBox = $(comboBoxElement).data("kendoComboBox");
}
};
}
}],
});
});
</script>