Blazor Page Combobox DataSource to async method

Question

I have an issue where I need to set DataSource for a combo box to a service's Async method.

<div class="col-xs-5 col-sm-5 col-lg-5 col-md-5">
    <SfComboBox TValue="string" TItem="ProjectStatusViewModel" PopupHeight="230px" Placeholder="Project Status" FloatLabelType="@FloatLabelType.Auto"
                DataSource="@LookUpService.GetProjectStatuses()" @bind-Value="@_projectToEdit.Status">
        <ComboBoxFieldSettings Text="Name" Value="Name"></ComboBoxFieldSettings>
    </SfComboBox>
</div>

I'm getting this error:

cannot convert from 'System.Threading.Tasks.Task<System.Collections.Generic.IEnumerable<DesignTracker.Application.ViewModels.ProjectStatusViewModel>>' 

to 

'System.Collections.Generic.IEnumerable<DesignTracker.Application.ViewModels.ProjectStatusViewModel>'   DesignTracker.UI.SyncfusionBlazorApp

Answer 1

Syncfusion support here.

We have checked the provided code example and issue details. We suspect that the reported issue may be cased due to mismatch in the type of data source and TItem in your application.

Also, we suggest you to bind the async method inside the OnInitialized method instead of assigned to the tag helper directly to avoid the issues at your end.

We have prepared the sample for your reference and attached it below.

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/274346/ze/ComboBox_274346-1580423979

[index.razor]

<SfComboBox TValue="string" TItem="Countries" PopupHeight="230px" Placeholder="Project Status" FloatLabelType="Syncfusion.Blazor.Inputs.FloatLabelType.Auto" 
            DataSource="@DataSource" @bind-Value="@val"> 
    <ComboBoxFieldSettings Text="Name" Value="Code"></ComboBoxFieldSettings> 
</SfComboBox> 
 
@code { 
 
    private string val { get; set; } 
 
    public CountryService DataService; 
    public List<Countries> DataSource = new List<Countries>(); 
 
    protected override async Task OnInitializedAsync() 
    { 
        DataSource = await ownservice.GetDataAsync(); 
        this.val = await ownservice.GetPreSelectDataAsync(); 
    } 
} 

[OwnService.cs]

public class CountryService 
    { 
 
        public async Task<List<Countries>> GetDataAsync() 
        { 
            List<Countries> Country = new List<Countries> 
        { 
            new Countries() { Name = "Australia", Code = "AU" }, 
            new Countries() { Name = "Bermuda", Code = "BM" }, 
            new Countries() { Name = "Canada", Code = "CA" }, 
            new Countries() { Name = "Cameroon", Code = "CM" }, 
            new Countries() { Name = "Denmark", Code = "DK" }, 
            new Countries() { Name = "France", Code = "FR" }, 
            new Countries() { Name = "Finland", Code = "FI" } 
        }; 
            return await Task.FromResult(Country); 
        } 
        public async Task<string> GetPreSelectDataAsync() 
        { 
            string value = "AU"; 
 
            return await Task.FromResult(value); 
        } 
    } 

[Startup.cs]

 
public void ConfigureServices(IServiceCollection services) 
{ 
    services.AddMvc(option => option.EnableEndpointRouting = false).SetCompatibilityVersion(CompatibilityVersion.Version_3_0); 
    services.AddRazorPages(); 
    services.AddServerSideBlazor(); 
    services.AddSyncfusionBlazor(); 
    services.AddSingleton<CountryService>(); 
} 
[WeatherForecast.cs] 
 
public class Countries 
{ 
    public string Name { get; set; } 
 
    public string Code { get; set; } 
}