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

1 Answer 27 Views
Report Viewer - Blazor
RC
Top achievements
Rank 1
RC asked on 25 Jun 2025, 01:34 PM | edited on 26 Jun 2025, 08:17 AM

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? 

 

1 Answer, 1 is accepted

Sort by
0
Ivet
Telerik team
answered on 27 Jun 2025, 08:55 PM

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

    Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

    RC
    Top achievements
    Rank 1
    commented on 01 Jul 2025, 10:19 AM

    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
    Telerik team
    commented on 04 Jul 2025, 08:59 AM

    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
    Top achievements
    Rank 1
    commented on 10 Jul 2025, 06:34 AM

    This is exactly what I need, thank you!
    Tags
    Report Viewer - Blazor
    Asked by
    RC
    Top achievements
    Rank 1
    Answers by
    Ivet
    Telerik team
    Share this question
    or