Hi,
I have a List of enums that need to be bound to a SfMultiSelect component.
However the bind-Value List is set to null whenever I select an item.
Please see the repro with a List<EEnum> not working comparing to a working List<string> : https://blazorplayground.syncfusion.com/rthejCgZwRjoKbhT
Regards
Hi Julien Barach,
Thank you for reaching out to us. We understand that you are facing an issue where the selected values are not being displayed in your SfMultiSelect component. The issue occurs because the SfMultiSelect is expecting an array of strings, but it is currently bound to an array of enum values.
To resolve this, please update your code so that the selected values are stored as strings instead of enums. Here’s the updated code snippet:
<SfMultiSelect TValue="string[]" TItem="string" Placeholder="Select countries" Width="300px" DataSource="@EnumValues" @bind-Value="SelectedValues"> </SfMultiSelect> <div> <strong>Selected Countries:</strong> @string.Join(", ", SelectedValues) </div> @code { // Get enum names as strings for the dropdown public string[] EnumValues = Enum.GetNames(typeof(Values)); // Store selected values as strings public string[] SelectedValues { get; set; } = new string[] { "Canada" }; public enum Values { Australia, Bermuda, Canada, Denmark, India, US } } |
The EnumValues array contains string representations of the enum names, making them compatible with the DataSource of the SfMultiSelect. The SelectedValues property is updated to store string values instead of enums, ensuring proper data binding. The selected values will now be displayed correctly in the div as a comma-separated list.
Please find the below sample for your reference.
Sample: https://blazorplayground.syncfusion.com/hXLyjrZATudokLvu
We hope this solution helps! Please let me know if you need any further assistance.
Regards,
Yohapuja S
Hi,
I Know that I can do that by converting the selected values to be a string[].
But it's more convenient for us to directly bind it to a list of enums as it would avoid to cast them back to enums later.
Furthermore this is working with the SfDropdown, so it could be great that the SfMultiSelect was able to do the same.
See repro with SfDropdown : https://blazorplayground.syncfusion.com/VNLyjhDzLRbJamaF
Hi Julien Barach,
We have carefully validated the reported issue and would like to share our findings.
Instead of using a custom-defined enum, we recommend using a direct enum type for TValue and TItem to ensure that the MultiSelect component functions correctly. This approach improves type safety and ensures seamless data binding.
For your reference, please find a working sample below:
<h2>MultiSelect Dropdown:</h2> @using Syncfusion.Blazor.DropDowns <div class="component-container"> <SfMultiSelect TValue="List<Enum>" TItem="KeyValuePair<Enum, string>" @bind-Value="@selected" DataSource="@source" Placeholder='Enums'> <MultiSelectFieldSettings Text="Value" Value="Key" /> </SfMultiSelect> <SfMultiSelect TValue="List<string>" TItem="KeyValuePair<string, string>" @bind-Value="@selectedStrings" DataSource="@sourceStrings" Placeholder='Strings'> <MultiSelectFieldSettings Text="Value" Value="Key" /> </SfMultiSelect> <br /><br /> <h3>Selected Enums</h3> @if (selected != null) { @foreach(var item in selected) { <p>@item</p> } } <hr /> <h3>Selected Strings</h3> @if (selectedStrings != null) { @foreach(var item in selectedStrings) { <p>@item</p> } } </div> @code { private List<KeyValuePair<Enum, string>> source = new(); private List<Enum> selected = new(); private List<KeyValuePair<string, string>> sourceStrings = new(); private List<string> selectedStrings = new(); protected override void OnInitialized() { source.Add(new(EEnum.One, "1")); source.Add(new(EEnum.Two, "2")); sourceStrings.Add(new("A", "A")); sourceStrings.Add(new("B", "B")); } public enum EEnum {One, Two} } |
You can also check out the working demo here:
Sample: https://blazorplayground.syncfusion.com/BNVStBtxLpmOOezj
Regards,
Yohapuja S