How to bind value Collection of class multiselect dropdown

[Matthijs Vollenbroek]

I am trying to bind a class to the multi select component.

However, selecting a value from the list makes the bound value Null.

In mudblazor, it is possible to bind a multi select component to a IEnumerable of a class. 

I succesfully used the SfDropDownList to bind a class to the component, but the same logic does not seem to work for MultiSelect Dropdown and there is no example of how to do this in the documentation.

[Kokila Poovendran]

Hi Matthijs Vollenbroek,

We have validated your query and prepared a sample for your reference. You can find the Blazor Playground sample by following this link: 

Sample: https://blazorplayground.syncfusion.com/VZhKiNNzsVyQleMi

If you encounter any issues, kindly modify the provided sample to replicate your exact problem. This will help us provide you with a prompt solution tailored to your needs.

Regarding documentation, we will include a section on how to bind a class to the MultiSelect Dropdown component as soon as possible. We will notify you once it's available.

If you have any further queries or concerns, please don't hesitate to let us know. We're here to assist you.

[Matthijs Vollenbroek]

Hi Kokila,

Thanks for the reply.

The code snippet provided does not bind a class. Hereby an example of a code trying to bind a multiselector to a class:

https://blazorplayground.syncfusion.com/LDLAMNXfLEhxsvai

It is not working properly and does not display any option names.

Here an example of how this works in MudBlazor:
https://try.mudblazor.com/snippet/QkcHPOkymXfPRqAx

Thanks in advance for helping

[Kokila Poovendran]

Hi Matthijs Vollenbroek,

Thank you for your response and for providing the example code snippet. We apologize for any inconvenience you've experienced.

Upon reviewing your code, we noticed that the "MultiSelectFieldSettings" was missing, which was causing the issue. We've made the necessary modifications to the sample code to ensure it functions as expected. You can access the updated sample bellow: 

Sample: https://blazorplayground.syncfusion.com/hNVqWDZozBNRmTzS

API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectFieldSettings.html

Please give it a try, and if you encounter any further concerns or have additional queries, please don't hesitate to reach out to us. We're here to assist you.

[Matthijs Vollenbroek]

Hi Kokila,

Thank you for the code snippet. 

However, the example did still not bind the selected values.

Furthermore, we would like to use the ToString() override to generate the name of the select option instead of having 

a separate variable defined that is responsible for this, is that possible without adding a property with  => ToString()?

Adjusted example seen below:

https://blazorplayground.syncfusion.com/VZrqWXWjprvaoodG

Thanks in advance for helping 

[Matthijs Vollenbroek]

Small update, i managed to fix the binding.

So the only question remains, can ToString be used as display text without introducing a property on the model?

I noticed that even with allowed filter allowed, the search bar is not filtering out items that match the name.

[Buvana Sathasivam]

Hi Matthijs,

Thank you for reaching out with your update.

We have made the necessary adjustments to your attached sample, allowing you to bind the class to the SfMultiSelect component value and perform filtering effectively. You can achieve this by implementing the following code snippet:

@using Syncfusion.Blazor.DropDowns

 

<SfMultiSelect ShowClearButton="false" TValue="List<Person>" TItem="Person" Placeholder="year..."

@bind-Value="@BoundPersons" AllowFiltering="true"

               FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains"

               DataSource="@DataItems">

    <MultiSelectFieldSettings Text="Name" Value="Age" />

</SfMultiSelect>

 

* @String.Join(',', BoundPersons ?? new List<Person>()) *

 

@code {

    public List<Person> BoundPersons { get; set; } = new List<Person> { new Person { Age=3, Name = "3" } };

    public List<Person> DataItems = Enumerable.Range(0, 5)

        .Select(n => new Person() { Age = n, Name = n.ToString() }).ToList();

 

    public record Person

    {

       

 

        public int Age { get; set; }

        public string Name { get; set; }

    }

}

Sample: https://blazorplayground.syncfusion.com/VZrqWXWjprvaoodG

If you have any further concerns or questions, please don't hesitate to let us know. We are here to assist you further.

Regards,

Buvana S