New to Telerik UI for Blazor? Download free 30-day trial

All Items in Dropdown Are Selected


Product ComboBox for Blazor,
DropDownList for Blazor


I have a DropDownList with a programmatically preselected Value. On initial page load, the component doesn't display the expected selected value. When the user selects an item from the dropdown, then all items show as selected.

A manually selected initial ComboBox value doesn't display, and then no matter which item I select, all values are selected.

Why the component matches all items to the selected one?

Possible Cause

Such unexpected behavior may occur if the ComboBox or DropDownList component are bound to a collection of objects. The possible reasons are related to incorrect configuration:

  • There is no ValueField set. Without it, the component cannot compare items.
  • Value and TValue are not of primitive type, while they should be (e.g. int, string, Guid, etc.)
  • The ValueField points to a model property, which is not unique for all items.
  • The ValueField points to a model property, which is equal to the default value for its type (null, 0, String.Empty, etc.)


When the ComboBox or DropDownList are data bound to a collection of complex objects, make sure that:

  • The component Value is of primitive type.
  • ValueField is set and points to a primitive property of the model.
  • The Value and ValueField property types match.
  • The ValueField property value should be unique for each item.
  • If TItem is set, it must match the model type.
  • If TValue is set, it must match the Value and ValueField type.


The test page below demonstrates several incorrect and correct configurations for comparison.

Bind ComboBox and DropDownList to a Model

<div id="dropdown-container">
        Incorrect (no ValueField, Value is not primitive): <br />
        <TelerikDropDownList @ref="@DropDownRef1"
                                TextField="@nameof(ListItem.Text)" />

        Incorrect (ValueField not unique): <br />
        <TelerikDropDownList @ref="@DropDownRef2"
                                ValueField="@nameof(ListItem.SameId)" />

        Incorrect (ValueField no values): <br />
        <TelerikDropDownList @ref="@DropDownRef3"
                                ValueField="@nameof(ListItem.EmptyId)" />

    <div class="correct">
        <strong>Correct (ValueField is unique and primitive):</strong> <br />
        <TelerikDropDownList @ref="@DropDownRef4"
                                ValueField="@nameof(ListItem.Id)" />

    #dropdown-container > div {
        display: inline-block;
        width: 300px;
        height: 300px;
        padding: 1em;
        background: #fdd;
        vertical-align: top;
    #dropdown-container > .correct {
        background: #dfd;

@code {
    TelerikDropDownList<ListItem, ListItem> DropDownRef1 { get; set; }
    TelerikDropDownList<ListItem, int> DropDownRef2 { get; set; }
    TelerikDropDownList<ListItem, int> DropDownRef3 { get; set; }
    TelerikDropDownList<ListItem, int> DropDownRef4 { get; set; }

    private List<ListItem> ListItems { get; set; }

    private ListItem SelectedListItem1 { get; set; }
    private int SelectedIntValue2 { get; set; } = 2;
    private int SelectedIntValue3 { get; set; } = 2;
    private int SelectedIntValue4 { get; set; } = 2;

    protected override async Task OnAfterRenderAsync(bool firstRender)
        if (firstRender)
            await Task.Delay(300);


    protected override void OnInitialized()
        ListItems = new List<ListItem>();

        for (int i = 1; i < 5; i++)
            ListItems.Add(new ListItem()
                Id = i,
                SameId = 2,
                Text = "Item " + i


    public class ListItem
        public int Id { get; set; }
        public int EmptyId { get; set; }
        public int SameId { get; set; }
        public string Text { get; set; }

See Also

In this article