Binding to List<model>

[HappyCamper]

Hi There,

I'm having difficulty populating the multiselect box items to a List of my model.  Databinding seems to work fine (it shows the number of items), but the Text is blank and you can't select anything.  

For my multiselect box I'm using:

           

On the page init I populate customers as follows:

private List customers;

protected override async Task OnInitializedAsync()

    {

//This is a WebAPI

        Tenant.CustomerClient customerClient = new Tenant.CustomerClient();

         customers = customerClient.CustomerGetAsync().Result.ToList();

    }

The Tenant.Customer Model has the following fields:

public partial class Customer 

    {

        public string Id { get; set; }

        public string Name { get; set; }

        public System.DateTimeOffset DateCreated { get; set; }

        public System.DateTimeOffset DateModified { get; set; }

        public string FirstName { get; set; }

        public string LastName { get; set; }

    }

but the end result looks like the attached

At runtime, I get the following error when clicking on the multiselect:

TypeError: this.value.indexOf is not a function

    at t.updateListSelection (https://localhost:44349/_content/Syncfusion.Blazor/scripts/dropdowns-9388dc.min.js:1:231010)

    at t.onMouseClick (https://localhost:44349/_content/Syncfusion.Blazor/scripts/dropdowns-9388dc.min.js:1:235273)

TypeError: e.slice is not a function

    at t.validateValues (https://localhost:44349/_content/Syncfusion.Blazor/scripts/dropdowns-9388dc.min.js:1:196251)

    at t.updateValueState (https://localhost:44349/_content/Syncfusion.Blazor/scripts/dropdowns-9388dc.min.js:1:196393)

    at t.onBlur (https://localhost:44349/_content/Syncfusion.Blazor/scripts/dropdowns-9388dc.min.js:1:194380)

If I create a new class in the page with the 2 fields ID and Name... it works... however I really don't want to create all these classes and rather use my models directly.  Any way I can get this to work?

Attachment: Capture_d4690a69.zip

[Berly Christopher]

Hi Rudi, 

  

Greetings from Syncfusion support.  

  

We have tried to reproduce the reported issue based on the provided details. Unfortunately, the reported issue is not occurred at our end. So, we have prepared the sample and attached it below. 

  

Sample Link: https://www.syncfusion.com/downloads/support/forum/153433/ze/MultiSelect_153433_async_load-55432263  

  

[index.razor] 

 

@using Syncfusion.Blazor.DropDowns 

@using BlazorApp1.Data 

@inject WeatherForecastService ForecastService 

 

<SfMultiSelect TValue="string" Placeholder="Select a game" DataSource="@LocalData"> 

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

</SfMultiSelect> 

 

@code { 

 

    private List<SpareNameViewModel> LocalData = new List<SpareNameViewModel>{}; 

 

    protected override async Task OnInitializedAsync() 

    { 

        var spareNamesResult = await ForecastService.GetSpareNamesAsync(); 

        if (spareNamesResult.IsSuccess) 

        { 

            LocalData = spareNamesResult.Data.ToList(); 

        } 

    } 

 

} 

 

[WeatherForecastService.cs] 

 

namespace BlazorApp1.Data 

{ 

    public class WeatherForecastService 

    { 

        public Task<Result> GetSpareNamesAsync() 

        { 

            var name = new Result() { Data = new SpareNameViewModel().getData(), IsSuccess = true }; 

            //name.Data.Where(i => i.Name.StartsWith(test, StringComparison.OrdinalIgnoreCase)).ToList(); 

            return Task.FromResult(name); 

        } 

    } 

    public partial class SpareNameViewModel 

    { 

        public object Id { get; set; } 

        public string Name { get; set; } 

        public Boolean IsSuccess { get; set; } = true; 

        public ObservableCollection<SpareNameViewModel> getData() 

        { 

            ObservableCollection<SpareNameViewModel> list = new ObservableCollection<SpareNameViewModel>(); 

            list.Add(new SpareNameViewModel() { Name = "Australia", Id = 1 }); 

            list.Add(new SpareNameViewModel() { Name = "Bermuda", Id = 2 }); 

            list.Add(new SpareNameViewModel() { Name = "Canada", Id = 3 }); 

            list.Add(new SpareNameViewModel() { Name = "Cameroon", Id = 4 }); 

            return list; 

        } 

    } 

    public class Result 

    { 

        public ObservableCollection<SpareNameViewModel> Data { get; set; } 

        public bool IsSuccess { get; set; } 

    } 

 

  

Please check the above sample and still issue persists, revert us with issue reproducing sample else modify the sample with reported issue / code example of component rendering that will help us to check and proceed further at our end.  

  

Regards, 

Berly B.C