FluentUI Web Components Select with Blazor - Select Enum values

Question

Examples only shows values with string and int. What can I do to select enum values without writing custom converters?

<h2>Default</h2>
<FluentSelect @bind-Value="@selectValue">
    <FluentOption>This option has no value</FluentOption>
    <FluentOption Disabled="true">This option is disabled</FluentOption>
    <FluentOption Value="@("hi")">This option has a value</FluentOption>
    <FluentOption Selected="true">This option is selected by default</FluentOption>
</FluentSelect>

<h2>Default with an int type</h2>
<FluentSelect @bind-Value="@selectValue2">
    <FluentOption Value=1>1</FluentOption>
    <FluentOption Value=-1 Disabled="true">-1</FluentOption>
    <FluentOption Value=2>2</FluentOption>
    <FluentOption Value=3 Selected="true">3</FluentOption>
</FluentSelect>

@code {
    string? selectValue;
    int selectValue2;

    List<Option<string>> stringOptions = new()
        {
            { new Option<string> { Key = "1", Value = "One" } },
            { new Option<string> { Key = "2", Value = "Two", Selected = true } },
            { new Option<string> { Key = "3", Value = "Three" } }

        };

    List<Option<int>> intOptions = new()
        {
            { new Option<int> { Key = 1, Value = 1, Disabled = true } },
            { new Option<int> { Key = 2, Value = 2 } },
            { new Option<int> { Key = 3, Value = 3 } }

        };
}

Ogglas · Accepted Answer · 2022-09-02 13:35:07Z

2

I solved it like this:

<FluentSelect @bind-Value="@threatDto.Severity" Options="@SeverityOptionList" Required="true">
</FluentSelect>

@code {

    List<Option<Severity?>> SeverityOptionList = Enum.GetValues(typeof(Severity)).Cast<Severity?>().Where(x => x != Severity.None).Select(x => new Option<Severity?> { Key = x.Value, Value = x.Value }).ToList();
}

Classes:

public class ThreatDto
{

    [Required, EnumDataType(typeof(Severity))]
    public Severity? Severity { get; set; }
        
}

public enum Severity
{
    None = 0,
    Critical = 1,
    High = 2,
    Medium = 3,
    Low = 4
}

answered Sep 2, 2022 at 13:35

Ogglas

71.4k43 gold badges388 silver badges484 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Matt Fitzmaurice Over a year ago

I can't get your code to work as FluentSelect doesn't have an Options attribute. It uses Items instead. brave-cliff-0c0c93310.azurestaticapps.net/Select . Am i doing something wrong?

Roger Perkins Over a year ago

For FluentSelect, instead of Key use Value and instead of Value use Text.

Collectives™ on Stack Overflow

FluentUI Web Components Select with Blazor - Select Enum values

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related