Bind ComboBox to object with list item properties

[Riley]

All examples of configuration for the Syncfusion Blazor SfComboBox implement a very simple Text/Value pairing for data-binding. I'm wondering if it's possible to bind an entire object with the datasource fields to the TItem properties - otherwise, what's the point of having TItem as an object?

    TValue="string"
    TItem="Employee"
    @bind-Value="parentObject.TestPerson.ID"
    DataSource="@personList"
    Placeholder="Search...">
    



...


private IEnumerable personList = new List();


...


public class Employee {
  public string ID {get;set;}
  public string DisplayName {get;set;}
  public string Email {get;set;}

}

Once bound, if I were to look at parentObject.TestPerson, I only see the ID. I want to be able to see the DisplayName and the Email address also mapped to TestPerson. If I swap out the 'string' references for an Employee object reference, and remove the trailing '.ID' in the @bind-Value, I get a jsonException of 'E' is an invalid start of a value ​- which I assume implies that we can only use primative types?

Is it possible to map these values?

[Sureshkumar P]

Hi Riley,

We suspect that you want to bind the Object data to the @bind-Value attribute of the combobox component, this is, you can map the class name to TValue.

Find the code example here:

@using Syncfusion.Blazor.DropDowns

 

<SfComboBox TValue="Games" TItem="Games" Width="300px" Placeholder="Select a game" DataSource="@LocalData" @bind-Value="@DropDownValue">

  <ComboBoxFieldSettings Value="ID" Text="Name"></ComboBoxFieldSettings>

</SfComboBox>

 

@code {

    SfDropDownList<Games, Games> DropObj;

    public Games DropDownValue { get; set; } = new Games() { ID = "Game4", Name = "Cricket" };

    public class Games

    { 

        public string ID { get; set; }

        public string Name { get; set; }

    }

    List<Games> LocalData = new List<Games> {

    new Games() { ID= "Game1", Name= "American Football" },

    new Games() { ID= "Game2", Name= "Badminton" },

    new Games() { ID= "Game3", Name= "Basketball" },

    new Games() { ID= "Game4", Name= "Cricket" },

    new Games() { ID= "Game5", Name= "Football" },

    new Games() { ID= "Game6", Name= "Golf" },

    new Games() { ID= "Game7", Name= "Hockey" },

    new Games() { ID= "Game8", Name= "Rugby"},

    new Games() { ID= "Game9", Name= "Snooker" },

    new Games() { ID= "Game10", Name= "Tennis"},

  };

}

Regards,

Sureshkumar P