CODEWITHSUNDEEP
.netasp.net-coreblazormatblazor
JustCoder
JustCoder

Reputation: 37

MatBlazor MatSelect control the order of MatOptions

I have created the following code using MatBlazor MatSelect:

<MatSelect Outlined="true" Id="class-status" TValue="int" @bind-Value="@myStatus">
  <MatOption Value="1">In service</MatOption>
  <MatOption Value="0">Out of service</MatOption>
</MatSelect>

But it keeps ordering it by the 'value' rather than the order I have coded it in. I even tried changing it to 'bool' instead of 'int' and still seemed to order false first.

How can I control the order it is displayed in and make 'In Service' the default selected?

Upvotes: 1

Views: 32

Answers (1)

Zhi Lv
Zhi Lv

Reputation: 21383

To make the 'In Service' the default selected, you can set the myStatus value in the @{...} block, code like this:

@code {
    private int myStatus = 1; // Set default to 1 for "In service"
}
<MatSelect Outlined="true" Id="class-status" TValue="int" @bind-Value="@myStatus">
    <MatOption Value="1">In service</MatOption>
    <MatOption Value="0">Out of service</MatOption>
</MatSelect>

To control the option order displayed in the select control, you can use the following code to add the options and use the OrderBy or OrderByDescending method to sort the options.

@code {
    private int myStatus = 1; // Set default to 1 for "In service"

    //order by the option using OrderBy or OrderByDescending method.
    private List<KeyValuePair<int, string>> statusOptions = (new List<KeyValuePair<int, string>>
      {
          new KeyValuePair<int, string>(1, "In service"),
          new KeyValuePair<int, string>(0, "Out of service")
      }).OrderByDescending(c => c.Key).ToList();
}
<MatSelect Outlined="true" Id="class-status" TValue="int" @bind-Value="@myStatus">
    @foreach (var option in statusOptions)
    {
        <MatOption Value="@option.Key">@option.Value</MatOption>
    }
</MatSelect>

The result as below:

ASC result:

asc result

DESC result:

desc result

Upvotes: 1

Related Questions