How to add MudSelect ChildContent?

Question

I usually use the foreach loop to fill the mudselect with items:

<MudSelect T="string" Label="Countries"  Variant="Variant.Outlined" Margin="Margin.Dense" SelectedValuesChanged="@((e)=>ViewModel.CountriesSelect(e))" @bind-Value="ViewModel.SelectedCountry" For="@(() => ViewModel.SelectedCountry)">
    @foreach (var item in ViewModel.Countries ?? new List<string>())
    {
        <MudSelectItem Value="@item">@item</MudSelectItem>
    }
</MudSelect>

But this causes the UI to freeze up when the list is to big. So I'm trying to find an alternative way.

I'm reading the documentation for MudSelect from https://mudblazor.com/api/select#properties The API says on List behavior->ChildContent "Add the MudSelectItems here".

I've been trying to find an example with no luck. How does this property work?

Answer 1

You may want to use Virtualization

@using Microsoft.AspNetCore.Components.Web.Virtualization

<div style="height:55px;overflow-y:hidden;">
    <MudSelect T="string" Label="Countries"  Variant="Variant.Outlined" Margin="Margin.Dense" SelectedValuesChanged="@((e)=>ViewModel.CountriesSelect(e))" @bind-Value="ViewModel.SelectedCountry" For="@(() => ViewModel.SelectedCountry)">
        <Virtualize Items="ViewModel.Countries" Context="country">
            <MudSelectItem T="string" Value="@country">@country</MudSelectItem>
        </Virtualize>
    </MudSelect>
</div>

Have a look at the snippet https://try.mudblazor.com/snippet/cOcnPmahTRNozSWQ The virtualized Select runs smoothly even with 1000 entries.

Don't forget to hide the overflow part of the Virtualized list