ComboBox Data Binding

This article explains the different ways to provide data to a ComboBox component, the properties related to data binding and their results.

There are two key ways to bind data:

There are also some considerations to keep in mind.

Primitive Types

You can data bind the ComboBox to a simple collection of data. When you have a concrete list of options for the user to choose from, their string representation is often suitable for display and you do not need special models.

To bind the combobox to a primitive type (like int, string, double), you need to

  1. provide an IEnumerable<TItem> of the desired type to its Data property
  2. set a corresponding Value. If the Value is null, it will be populated with the first item from the data source.

Data binding a ComboBox to a primitive type

@*Bind to a List of a primitive type (string, int,...)*@

<TelerikComboBox Data="@MyList" @bind-Value="MyItem">
</TelerikComboBox>

@code {
    protected List<string> MyList = new List<string>() { "first", "second", "third" };

    protected string MyItem { get; set; } = "second";
}

Bind to a Model

You can bind the ComboBox to a model in your application. This is useful when you have a numerical representation of a finite list (for example, departments in a company), and you want the user to choose them based on a friendly text name.

To bind the ComboBox to a model:

  1. populate its Data property with the collection of items you want in the dropdown
  2. set the TextField and ValueField properties to point to the corresponding names of the model
  3. set the Value property to the intial value of the model. If not set, it will be populated with the first item in the data source.

Data binding a ComboBox to a model

@selectedValue

<TelerikComboBox Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="selectedValue">
</TelerikComboBox>

@code {
    //in a real case, the model is usually in a separate file
    //the model type and value field type must be provided to the dropdpownlist
    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }

    IEnumerable<MyDdlModel> myDdlData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });

    int selectedValue { get; set; } = 3; //usually the current value should come from the view model data
}

Considerations

The ComboBox component attempts to infer the type of its model and value based on the provided Data and initial Value. This affects the way its reference is obtained and what happens if you can't provide data or a value.

Component Reference

The ComboBox is a generic component and its type comes from the model it is bound to and from the value field type. When bound to a primitive type, the reference is of that primitive type only.

@*Reference type when binding to primitive values*@

<TelerikComboBox @ref="myComboRef" Data="@MyList" Value="@initialValue">
</TelerikComboBox>

@code {
    //the type of the generic component is determined by the type of the model you pass to it, and the type of its value field
    Telerik.Blazor.Components.TelerikComboBox<string, string> myComboRef;

    protected List<string> MyList = new List<string>() { "first", "second", "third" };

    string initialValue { get; set; } = "third";
}
@*Reference when binding to model collections*@

<TelerikComboBox @ref="@myComboRef" Data="@myComboData" TextField="MyTextField" ValueField="MyValueField" Value="3">
</TelerikComboBox>
@code {
    //the type of the generic component is determined by the type of the model you pass to it, and the type of its value field
    Telerik.Blazor.Components.TelerikComboBox<MyDdlModel, int> myComboRef;

    IEnumerable<MyDdlModel> myComboData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });

    public class MyDdlModel
    {
        public int MyValueField { get; set; }
        public string MyTextField { get; set; }
    }
}

Missing Value or Data

In case you cannot provide either of a Value, or Data, or both when the component initializes, you need to set the corresponding type properties to the TItem and TValue properties as shown below.

ComboBox configuration if you cannot provide Value or Data

@*How to declare the combobox if no Value or Data are provided*@

<TelerikComboBox Data="@myComboData" TextField="MyTextField" ValueField="MyValueField" TValue="int" TItem="MyDdlModel">
</TelerikComboBox>

@code {
    public class MyDdlModel //TItem matches the type of the model
    {
        public int MyValueField { get; set; } //TValue matches the type of the value field
        public string MyTextField { get; set; }
    }

    IEnumerable<MyDdlModel> myComboData = Enumerable.Range(1, 20).Select(x => new MyDdlModel { MyTextField = "item " + x, MyValueField = x });

    //the same configuration applies if the "myComboData" object is null initially and is populated on some event
}

See Also

In this article
Not finding the help you need? Improve this article