Data Binding to any control to list of items not showing fields.

[HappyCamper]

Hi There,

Silly question.  Why do I have to declare my models of my items within the page I have my control in in order for the items to show up?  As part of our standard webapi, we have client code in our project that declares our objects.  for example:

public class MyService.Api.Tenant.Customer

{

public string Id {get;set;}

public string Name {get;set;}

}

and this is declared in a codebehind class in my project.

Now in my razor page, I'm trying to populate a dropdown (or any control in any page).  

If I declare my types as follows, and try and populate my List... the control have the amount of items that gets returned, but the text values are blank....

 <SfDropDownList @ref="ddCustomers"

                                                    TValue="MyService.Api.Tenant.Customer"

                                                    TItem="MyService.Api.Tenant.Customer"

                                                    Placeholder="Select a customer"

                                                    AllowFiltering="true"

                                                    DataSource="@customers"

                                                    ShowClearButton="true">

                                        <SfDataManager Json=@customers></SfDataManager>

                                        <DropDownListFieldSettings Text="Name" Value="Id"></DropDownListFieldSettings>

                                        <DropDownListEvents TValue="string" Created="LoadCustomers"></DropDownListEvents>

                                    </SfDropDownList>

@code {

    private List<MyService.Api.Tenant.Customer> customers;

 protected async Task LoadCustomers()

    {

        customers = new List<MyService.Api.Tenant.Customer>();

        await ddCustomers.ShowSpinner();

        MyService.Api.Tenant.CustomerClient customerClient = new MyService.Api.Tenant.CustomerClient(_Globals._HttpClient_Tenant.BaseAddress.ToString(), _Globals._HttpClient_Tenant);

        var customersenum = await customerClient.CustomerGetAsync(_Globals.CurrentAddressbarCompanyID.Value);

        customers = customersenum.ToList();

        await ddCustomers.DataBind();

        ddCustomers.Refresh();

        await ddCustomers.HideSpinner();

    }

}

Attachment shows the screenshot.  Any way I can get this to show correctly?  I really prefer not having to redeclare my models in each page that I want to use a databound control.  Thanks!

Attachment: Annotation_20200724_145640_2cb7c41d.zip

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Rudi,

Greetings from Syncfusion support.

We have checked your query. We would like to know you that you can declare your class inside models and then import wherever you need. On examining your code snippet, it seems you have bound TValue as class type. We would like to aware you that SfDropdownlist supports only String, Integer and Boolean types for TValue as of now.

Also, we suggest you not to use Datasource property, if you are using DataManager. We have modified the code and made a simple sample for your convenience. Please find the sample in the attachment.

Sample Link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp3-1589399028 

[Index.razor] 

@inject CountryService ownservice

<SfDropDownList TValue="String" TItem="Countries" DataSource="@DataSource" Placeholder="Select a country" ShowClearButton="true" AllowFiltering="true"> 

        <DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings> 

        <DropDownListEvents TValue="String" Created="OnCreated"></DropDownListEvents> 

</SfDropDownList> 

 

@code { 

 

    public CountryService DataService; 

    public List<Countries> DataSource = new List<Countries>(); 

 

    public async void  OnCreated() 

    { 

        DataSource = await ownservice.GetDataAsync(); 

    } 

 

} 

[CountryService.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); 

        } 

 

    } 

If we misunderstood your query, kindly revert back with some more elaboration or if possible, try to replicate the reported issue in the attached sample which will help us to provide you a better solution from our end.

Thanks,
Jeyanth. 

[HappyCamper]

Tried as per your example but I'm still getting the same result.  dropdown has the amount of lines as there is items, but the items have no text.  Do I maybe have to specify fully qualified paths to the fields used?  looks like this now:

 

                                                        @bind-Value="selectedCustomer"

                                                        TValue="string"

                                                        TItem="MyService.Api.Tenant.Customer"

                                                        Placeholder="Select a customer"

                                                        AllowFiltering="true"

                                                        DataSource="@customers">

                                           

                                           

                                       

@code {

    public List customers = new List();

    private string selectedCustomer { get; set; }

public async void LoadCustomers()

    {

         await ddCustomers.ShowSpinner();

         MyService.Api.Tenant.CustomerClient customerClient = new MyService.Api.Tenant.CustomerClient(_Globals._HttpClient_Tenant.BaseAddress.ToString(), _Globals._HttpClient_Tenant);

        var customersenum = await customerClient.CustomerGetAsync(_Globals.CurrentAddressbarCompanyID.Value, null, null, null, null, null, null, null, null);

        foreach (var pp in customersenum) { customers.Add(new Cubikil.Api.Tenant.Customer { Id = pp.Id, Name = pp.Name }); }

        await ddCustomers.HideSpinner();

    }

}

ps:  how do I insert a code block into the reply thread? :D

[HappyCamper]

Pasting code again.  for some reason it didn't paste correctly.

<SfDropDownList @ref="ddCustomers" @bind-Value="selectedCustomer"  TValue="string"  TItem="MyService.Api.Tenant.Customer"  Placeholder="Select a customer" AllowFiltering="true" DataSource="@customers">

<DropDownListFieldSettings Text="Name" Value="Id"></DropDownListFieldSettings>

 <DropDownListEvents TValue="string" Created="LoadCustomers" ValueChange="CustomerChanged"></DropDownListEvents>

</SfDropDownList>

@code {

    public List<MyService.Api.Tenant.Customer> customers = new List<MyService.Api.Tenant.Customer>();

    private string selectedCustomer { get; set; }

protected async Task LoadCustomers()

    {

        //customers = new List<CustomerList>();

        ddCustomers.Readonly = true;

        //StateHasChanged();

        await ddCustomers.ShowSpinner();

       

        var customerClient = new MyService.Api.Tenant.CustomerClient(_Globals._HttpClient_Tenant.BaseAddress.ToString(), _Globals._HttpClient_Tenant);

        var customersenum = await customerClient.CustomerGetAsync(_Globals.CurrentAddressbarCompanyID.Value, null, null, null, null, null, null, null, null);

        foreach (var pp in customersenum) { customers.Add(new MyService.Api.Tenant.Customer{ Id = pp.Id, Name = pp.Name }); }

        

        await ddCustomers.HideSpinner();

       

    }

}

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Rudi,

Thanks for your update. 

In our end we couldn't reproduce the reported issue. Could you please provide sufficient code to reproduce the issue, or share the sample with replication procedure? Even, if you have faced an application console error share with us. In our end it helps us validate the reported issue.

If possible, try to replicate the issue in the attached sample.

Sample Link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp3-1589399028 

Regards,
Jeyanth.