We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

How do you hide chips and control what is shown when Multiselect is closed?

The Blazor Multiselect control shows a list of chips when the dropdown is closed. If the chips exceed the width of the control, the control adds "+N more..."

Is there a way to not show the chips?

I would rather summarize the selection and not show the chips in some cases. For example, "25 Customers Selected" or something like that. I can see some internal/private values related to how this works, but I haven't identified a property or template that manages this.

Please advise.

Thank you.

2 Replies

JA Jeff Adkisson March 30, 2023 07:26 PM UTC

Bumping this... any ideas? I tried updating the innerHTML of the DOM element containing the delimined list via Javascript interop after the Close event is called. That did not work well... the control then started nulling the list for reasons that were unclear to me, even when I updated the DOM element element using a 500ms delay.


Please advise.

UD UdhayaKumar Duraisamy Syncfusion Team April 2, 2023 08:21 AM UTC

You can display the count of selected items instead of their values in the MultiSelect component by using the ValueChange, Blur event and JS interop, as shown in the code snippet below.


@using Syncfusion.Blazor.DropDowns

@inject IJSRuntime JSRuntime


<div style="margin:130px auto;width:300px">

    <SfMultiSelect TItem="GameFields" TValue="string[]" DataSource="@Games" EnableChangeOnBlur="false">

        <MultiSelectEvents TItem="GameFields" TValue="string[]" ValueChange="@ValueChangeHandler" Blur="@BlurHandler"></MultiSelectEvents>

        <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>



@code {


    public int ItemCount { get; set; }

    public class GameFields


        public string ID { get; set; }

        public string Text { get; set; }



    private List<GameFields> Games = new List<GameFields>() {

        new GameFields(){ ID= "Game1", Text= "American Football" },

        new GameFields(){ ID= "Game2", Text= "Badminton" },

        new GameFields(){ ID= "Game3", Text= "Basketball" },

        new GameFields(){ ID= "Game4", Text= "Cricket" },



    private async Task ValueChangeHandler(MultiSelectChangeEventArgs<string[]> args)


        ItemCount = args.Value.Count();


    private async Task BlurHandler(Object args)


        await JSRuntime.InvokeAsync<object>("updateValue", ItemCount);




        function updateValue(e)


            document.querySelector('.e-delim-values.e-delim-view').innerHTML = e +' Selected';


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ShowItemCount555979193

Live Chat Icon For mobile
Up arrow icon