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

[Jeff Adkisson]

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.

[Jeff Adkisson]

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.

[UdhayaKumar Duraisamy]

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.

[Index.razor]

@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>

    </SfMultiSelect>

</div>

@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);

    }

}

[Script]

        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