We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Bind ComboBox to object with list item properties

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?



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?

1 Reply

SP Sureshkumar P Syncfusion Team February 3, 2023 09:54 AM UTC

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>



@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"},




Sureshkumar P

Live Chat Icon For mobile
Up arrow icon