DxComboBox<T> Class

A ComboBox component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll

Declaration

public class DxComboBox<T> :
    DxComboBoxBase<T>

Type Parameters

Name Description
T

The data item type.

Remarks

The DevExpress ComboBox for Blazor (<DxComboBox>) component displays a drop-down window with a list of items.

Blazor_DataEditors_Landing_ComboBox

NOTE

Online Demo: ComboBox

Add ComboBox to a Project

To add the <DxComboBox> component to an application, follow the steps below:

  1. Create and configure the application as described in the Create a New Blazor Application document.

  2. Add the <DxComboBox>...</DxComboBox> markup to your application.

  3. Bind the component to a data source.

  4. Configure the component (see the sections below).

Bind to Data

Use the Data property to bind the ComboBox to an IEnumerable<T> data source synchronously. If the data source is large or requires access to a remote web service over slow networks, use the DataAsync property instead. It allows you to load data asynchronously and await completion without blocking application code execution.

NOTE

The ComboBox operates in bound mode only. Unbound mode is not supported.

<DxComboBox Data="@Cities"></DxComboBox>

@code {
  IEnumerable<string> Cities = new List<string>() {
    "London",
    "Berlin",
    "Paris",
  };
}

If you bind the ComboBox to a data source that stores custom objects (IEnumerable<CustomType>), use the TextFieldName property. It specifies the custom object's field name that returns string values to be shown within the ComboBox's drop-down window.

Blazor_ComboBox_CustomObject

<DxComboBox Data="@DataSource"
            TextFieldName="Text">
</DxComboBox>

@code {
    IEnumerable<Person> DataSource;
}

The code below demonstrates a sample implementation of the Person class.

public class Person
{
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public Department Department { get; set; }

    public string Text => $"{FirstName} {LastName} ({Department} Dept.)";
}

Otherwise, the ComboBox items are populated with CustomType.ToString() values.

To bind the ComboBox to a data source that is not of the IEnumerable<T> type, assign the data source type to the component's T parameter and use the CustomData property to implement the data load logic.

Items

The <DxComboBox> drop-down window displays a list of predefined items. Set the AllowUserInput property to true to allow users to type values into the ComboBox's edit box.

Blazor_ComboBox_Overview

<DxComboBox Data="@Cities"
            AllowUserInput="@true"
            NullText="Select City ..."
            @bind-SelectedItem="@SelectedItem"
            @bind-Text="@Text">
</DxComboBox>

@code {
    IEnumerable<string> Cities = new List<string>() {
        "London",
        "Berlin",
        "Paris",
    };

    string text = "New York";
    string Text { get => text; set { text = value; InvokeAsync(StateHasChanged); }  }

    string selectedItem = "";
    string SelectedItem { get => selectedItem; set { selectedItem = value; InvokeAsync(StateHasChanged); }  }
}

To specify an editor value in code, use the Text property. To respond to an editor's text change, handle the TextChanged event.

The table below lists API members related to ComboBox item collection:

Member

Description

SelectedItem

Specifies the ComboBox's selected item.

SelectedItemChanged

Fires when the ComboBox's selected item is changed.

DropDownVisible

Specifies the current state (displayed/hidden) of a drop-down window.

ShowDropDown()

Displays an editor's drop-down window.

Null Value

Set the ClearButtonDisplayMode property to Auto to show the Clear button when the editor has a non-null value. Users can click this button to clear the editor's value (set it to null).

Use the NullText property to display the prompt text in the editor when its value is null.

Blazor_ComboBox_NullValue

<DxComboBox Data="@DataSource"
            ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
            NullText="Select an option..."
            ...>
</DxComboBox>

@code {
    List<Options> DataSource = ...

    Options SelectedOption { get; set; }
}
NOTE

Online Demo: ComboBox - NullText

Cascading Combo Boxes

The <DxComboBox> allows you to create cascade lists - populate one ComboBox with items based on the user selection from another ComboBox. Use the SelectedItem property to access the selected item. To respond to the selected item change, handle the SelectedItemChanged event.

Blazor_ComboBox_Cascade_Logic

<DxComboBox Data="@Countries" SelectedItem="@CurrentCountry" SelectedItemChanged="@SelectedCountryChanged"></DxComboBox>
<DxComboBox Data="@CurrentCountryCities" SelectedItem="@CurrentCity" SelectedItemChanged="@SelectedCityChanged"></DxComboBox>

@code {
  List<Country> Countries = CountryCity.Countries;
  List<City> CurrentCountryCities = new List<City>();
  Country CurrentCountry;
  City CurrentCity;

    void SelectedCountryChanged(Country country)
    {
        CurrentCountry = country;
        CurrentCountryCities = Cities.FindAll(city => city.CountryId == CurrentCountry.Id);
        CurrentCity = CurrentCountryCities[0];
        InvokeAsync(StateHasChanged);
    }

    void SelectedCityChanged(City city)
    {
        CurrentCity = city;
        InvokeAsync(StateHasChanged);
    }
}
NOTE

Online Demo: ComboBox - Cascading Lists

Filter Data

<DxComboBox> allows you to dynamically filter list items based on the text typed into the editor. Use the FilteringMode property to enable filtering and specify the filter mode (Contains or StartsWith).

Blazor_ComboBox_Filter

<DxComboBox FilteringMode="DataGridFilteringMode.Contains" ></DxComboBox>

Virtual Scrolling

When virtual scrolling is activated (ListRenderMode is set to Virtual), the ComboBox loads data on demand when a user scrolls its items.

<DxComboBox Data="@Strings"
            ListRenderMode="ListRenderMode.Virtual">
</DxComboBox>

Read-Only State

<DxComboBox> supports a read-only state. Set the ReadOnly property to true to activate this option.

<DxComboBox ReadOnly="true"> </DxComboBox>
NOTE

Online Demo: ComboBox - Read-Only Mode

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxDecoratedComponent
DxComponentBase
DxComponentBase<DevExpress.Blazor.Internal.JSInterop.ComboBoxJSInteropProxy>
DevExpress.Blazor.Internal.DxEditorBase<T, DevExpress.Blazor.Internal.JSInterop.ComboBoxJSInteropProxy>
DxDropDownBase<T, DevExpress.Blazor.Internal.JSInterop.ComboBoxJSInteropProxy>
DxComboBoxBase<T>
DxComboBox<T>
See Also