How to create a multiselect combo box report parameter inside the Native Blazor Report Viewer

[RC]

The Native Blazor Report Viewer uses Blazor Multiselect by default for multiselect parameters. This becomes very cluttered when many items are selected.

I want to display parameters in a multi-select dropdown list with check boxes, exactly like this: https://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/checkboxes/defaultcs.aspx

The equivalent Blazor demo is more cluttered as selections showing in the select box: https://www.telerik.com/blazor-ui/documentation/knowledge-base/multiselect-checkbox-in-dropdown 

The article here https://docs.telerik.com/reporting/embedding-reports/display-reports-in-applications/web-application/native-blazor-report-viewer/customizing/how-to-create-custom-parameter-editors has an example on how to customize the parameter widget in Native Blazor Report Viewer.

Can anyone here share the code to create a nice clean multi-select dropdown list with check boxes for a parameter in the Native Blazor Report Viewer? 

 

[Ivet]

Hi Rob,

Thank you for the provided screenshots.

To create a multi-select dropdown with checkboxes for parameters in the Native Blazor Report Viewer, you can insert the following sample code into your viewer and modify it to work with your data - Telerik REPL for Blazor - The best place to play, experiment, share & learn using Blazor.

I hope the above information will be useful. Let me know if you have other questions.

Regards,
Ivet
Progress Telerik

[RC]

Thank you, this is a very helpful way to test the code. Is there a way to hide the highlighted list of selected values? These are not necessary as I can always untick them:

[Dimitar]

Hi Rob,

Do you wish to hide the whole list or after a certain number of entries?

If it is the former, you can use the following CSS

    .k-multiselect .k-chip-list {
        display: none;
    }

If it is the latter, the following CSS will hide all selected elements starting with the 3rd:

    .k-multiselect .k-chip:nth-child(n+3) {
        display: none;
    }

 

[RC]

This is exactly what I need, thank you!