7

I'm using MudBlazor, specifically MudSelect. I want to display the Name property, but save the Id property in the Value. The following is working.

<MudSelect T="int" Label="Assigned Group" Variant="Variant.Outlined" Required="true" RequiredError="An Assigned Group is required."  @bind-Value="newTask.GroupId" AdornmentIcon="@Icons.Filled.Group">
    @foreach (var group in Groups)
    {
        <MudSelectItem Value="@group.Id">@group.Name</MudSelectItem>
    }
</MudSelect>

But, as the number of options starts growing it makes sense to add a search field along the Select List. I don't know how to use that in MudSelect. And while using MudAutocomplete, which gives me a search function, I don't know how to associate the Id to the selected Name. And while, since my Name, is unique I can do some processing on the submit to get the Id, I want to prevent the extra processing

Henrique Pombo
  • 537
  • 1
  • 6
  • 20
  • 1
    To my knowledge MudSelect does not support this. I looked for it, too, some time ago. I ended up using the `ToStringFunc` parameter of `MudAutocomplete`. Using that you can achieve everything you need. – Jan Jan 14 '22 at 18:49
  • https://stackoverflow.com/q/71654461/12878692 this helped me it works well – Berkay Aug 03 '22 at 18:21

4 Answers4

2

As far as I know, MudBlazor doesn't have dynamic data loading in MudSelect.

As mentioned here, you can use Virtualization MudBlazor to achieve maximum performance for large number of items.

Here is an example of virtualization in MudSelect with large number of data.

It seems like that they're not working on dynamic data for MudSelect, don't wait for that (at least for next months).

more info: You can also use virtualization for tables, like this.

Navid Yazdi
  • 31
  • 4
1

I changed to an autocomplete, showing the top ten by default, then as the user types, the list auto filters to the top 10 containing the text entered.

 <MudAutocomplete T="SM.Role"
     Value="_employee.Role"
     Label="Role"
     SearchFunc="@EmployeeViewModel.SearchRole"
     ResetValueOnEmptyText="@false"
     CoerceText="@false"
     DebounceInterval="500"
     CoerceValue="@false"
     ValueChanged="@OnRoleSelectionChanged"
     AdornmentIcon="@Icons.Material.Filled.Search"
     AdornmentColor="Color.Primary"
     ToStringFunc="@(e => e == null ? null : $"{e.Name}")" />
Lou
  • 51
  • 5
0

You can use CodeBeam.MudBlazor.Extensions package. It has MudSelectExtended and has built-in search support. It also has MudComboBox to similar search functions.

Can try here https://codebeam-mudextensions.pages.dev/mudselectextended

Mehmet Can Karagöz
  • 69
  • 2
0

To make a searchable MudSelect component in a Blazor application, you can create a custom component that inherits from MudSelect and overrides its FocusAsync() method. After that, you can add a search input within this custom component.

Step 1: Create a CustomMudSelect Component First, create a new Blazor component and name it CustomMudSelect. In this component, inherit from MudSelect and override the FocusAsync() method.

Step 2: Add a Search Input Inside CustomMudSelect include a search input in the component's markup. This will enable the user to filter items within the MudSelect component.

<i>
     
    public class CustomMudSelect<T>: MudSelect<T>
    {
      public override ValueTask FocusAsync()
      {
         return new ValueTask();
      }
    }

    <CustomMudSelect T="int" Label="Assigned Group" Variant="Variant.Outlined" 
    Required="true" RequiredError="An Assigned Group is required."@bind- 
    Value="newTask.GroupId" AdornmentIcon="@Icons.Filled.Group">

        <input class="form-control" placeholder="Search..." 
        @oninput="@((ChangeEventArgs e) => { searchText = 
        e.Value.ToString(); 
        StateHasChanged();})"/>
    
       @foreach (var group in Groups)
       {
             if (string.IsNullOrEmpty(searchText) || 
                 group.Name.Contains(searchText, 
                 StringComparison.OrdinalIgnoreCase)
                )
                {
                   <MudSelectItem Value="@group.Id">@group.Name</MudSelectItem>
                }
           
       }
    </CustomMudSelect>


</i>
Ashugh
  • 1
  • 1