Turn Report Parameter list of data into a DropDown

[Marcus]

 

Hello,

I wanted to know how to set the parameters datasource list to appear as a dropdown and not the way they are showing in the attached image. I don't see any kind of option to make it a dropdownlist as I thought this was default behavior.

 

[Todor]

Hello Marcus,

In the Html5 Viewer you may set the option parameters -> editors ->singleSelect and multiSelect to "COMBO_BOX" - check Report Viewer Initialization for more details. The default mode is "LIST_VIEW". Here is sample code:

$("#reportViewer1").telerik_ReportViewer({
	...
     parameters: {
         editors: {
             singleSelect: telerikReportViewer.ParameterEditorTypes.COMBO_BOX,
             multiSelect: telerikReportViewer.ParameterEditorTypes.COMBO_BOX
         }
     },
    ...
});

Regards,
Todor
Progress Telerik

[Krunal]

I'm trying to show comboboxes instead of list using following lines of code but it seems to be not working. It keeps showing me the listbox only.

this.viewer = $('#reportViewer')
      .telerik_ReportViewer({
        serviceUrl: `${environment.apiUrl}/reportdesigner/`,
        reportSource: {
          report: `${reportName}`,
          parameters: {
            editors: {
              singleSelect: 'COMBO_BOX',
              multiSelect: 'COMBO_BOX',
            },
          },
        },
        parametersAreaVisible: true,
        parametersAreaPosition: 'TOP',
      })
      .data('telerik_ReportViewer');

Any help on this?

[Dimitar]

The issue is that the code for changing the editors is put inside the reportSource property, the code should instead be at the top level, for example:

this.viewer = $('#reportViewer')
      .telerik_ReportViewer({
        serviceUrl: `${environment.apiUrl}/reportdesigner/`,
        reportSource: {
          report: `${reportName}`,
        },
         parameters: {
           editors: {
             singleSelect: 'COMBO_BOX',
             multiSelect: 'COMBO_BOX',
           },
         },
        parametersAreaVisible: true,
        parametersAreaPosition: 'TOP',
      })
      .data('telerik_ReportViewer');

Please try changing it as the example above and let us know if that helps.

[Krunal]

@Dimitar Thanks for your reply. I managed to figure this out myself somehow but in hard way and after spending some time