Using DropDowns for Filters in the HTML5 Report Viewer

Environment

Product	Reporting
Report Viewer	HTML5, HTML5 Wrappers

Description

By default, the visible report parameters, or in other words - "filters", that have available values, are displayed as lists in the report viewer. I wish to display the single/multi-select filters as dropdowns instead.

Solution

To use dropdowns, the parameter editors used by the HTML5 Report Viewer can be changed to Kendo for jQuery's ComboBox widget with the following code:

js

$("#reportViewer1")
    .telerik_ReportViewer({
        serviceUrl: "api/reports/",
        reportSource: {
            report: "Product Catalog.trdp",
        },
        parameters: {
            editors: {
                singleSelect: telerikReportViewer.ParameterEditorTypes.COMBO_BOX,
                multiSelect: telerikReportViewer.ParameterEditorTypes.COMBO_BOX,
            }
        },
    });

• Replace #reportViewer1 with the ID of your Report Viewer instance if it is different.
• Ensure the serviceUrl points to the correct API endpoint for the reporting service.