Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Blazor / MudSelect: how to pre-select certain values from a multi-select dropdown

$
0
0

I have a MudBlazor MudSelect component on my Blazor (server-side rendering) page, which displays a list of departments from my school:

<MudSelect T="KeyText" id="idAddDept" @bind-SelectedValues="AdditionalDepartments"            MultiSelection=true ToStringFunc="x => x.Text" Delimiter=", ">    @foreach (KeyText item in ListOfDepartments)    {<MudSelectItem T="KeyText" Value="@item">@item.Value</MudSelectItem>    }</MudSelect>

The KeyText is a simple class:

public class KeyText{    public int Key { get; set; }    public string Text { get; set; }}

to hold my data from MS Dynamics - a numerical key value, associated with a textual representation of the department; 1001 - Dept. A, 1002 - Dept. B etc.

I can successfully load the list of all departments from Dynamics, and I store that in my component in a ListOfDepartments variable:

protected List<KeyText> ListOfDepartments { get; set; }

I also have another variable called AdditionalDepartments, which holds the currently selected departments:

protected IEnumerable<KeyText> AdditionalDepartments { get; set; }

I'm storing a comma-separated list of the numerical values of the selected "additional departments" in my database table:

1001,1004,1007

and when loading the object that's being worked on in this page, I parse this string value into a List<KeyText> values - based on the complete ListOfDepartments.

The trouble I'm facing right now is this: the multi-select dropdown properly shows all valid values from the ListOfDepartments, and I can select any number of them from the dropdown - but I cannot seem to initialize that display with those departments that have already been selected previously - those contained in AdditionalDepartments.

I had been reading about MudSelect having a Selected property on the MudSelectItem (in case the parent MudSelect is using multi selection - which it is, here in this case) - but I cannot get this to work - this code won't even compile:

<MudSelect T="KeyText" id="idAddDept" @bind-SelectedValues="AdditionalDepartments"            MultiSelection=true ToStringFunc="x => x.Text" Delimiter=", ">    @foreach (KeyText item in ListOfDepartments)    {<MudSelectItem T="KeyText" Value="@item" Selected="true">@item.Value</MudSelectItem>    }</MudSelect>

What am I missing here? I had hoped with the @bind-SelectedValues, those additional departments that have already been selected earlier would be properly displayed as such in the MudSelect dropdown - they are not. And I cannot seem to be able to find any way to mark those entries with a Selected moniker, either...


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>