DxComboBox<TData, TValue>.ValueChanged Event

Fires when the ComboBox’s selected value changes.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public EventCallback<TValue> ValueChanged { get; set; }

Parameters

Type	Description
TValue	The value type.

Remarks

Use the ValueChanged event to handle changes to the ComboBox’s selected value.

The example below demonstrates how to populate a ComboBox editor with items based on another ComboBox’s selection.

Razor

@using CountryCityData

<DxComboBox Data="@Countries"
            TextFieldName="@nameof(Country.CountryName)"
            Value="@CurrentCountry"
            ValueChanged="@((Country country) => SelectedCountryChanged(country))"
            AllowUserInput="true">
</DxComboBox>
<DxComboBox Data="@CurrentCountryCities"
            TextFieldName="@nameof(City.CityName)"
            @bind-Value="@CurrentCity"
            AllowUserInput="true">
</DxComboBox>

@code {
    List<Country> Countries { get; set; } = CountryData.Countries;
    List<City> CurrentCountryCities { get; set; } = new List<City>();
    Country CurrentCountry { get; set; } = CountryData.Countries[1];
    City CurrentCity { get; set; } = CityData.Cities[4];

    protected override void OnInitialized() {
        base.OnInitialized();
        SelectedCountryChanged(CurrentCountry);
    }

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

CountryCity

namespace CountryCityData {
    public class City {
        public int Id { get; set; }
        public int CountryId { get; set; }
        public string CityName { get; set; }
    }

    public static class CityData {
        private static readonly Lazy<List<City>> cities = new Lazy<List<City>>(() => {
            return new List<City>() {
            new City() { Id = 0, CountryId = 0, CityName = "Washington" },
            new City() { Id = 1, CountryId = 0, CityName = "New York" },
            new City() { Id = 2, CountryId = 0, CityName = "Los Angeles" },
            new City() { Id = 3, CountryId = 1, CityName = "Berlin" },
            new City() { Id = 4, CountryId = 1, CityName = "Munich" },
            new City() { Id = 5, CountryId = 1, CityName = "Hamburg" },
            new City() { Id = 6, CountryId = 2, CityName = "Tokyo" },
            new City() { Id = 7, CountryId = 2, CityName = "Osaka" },
            new City() { Id = 8, CountryId = 2, CityName = "Yokohama" }
        };
        });
        public static List<City> Cities { get { return cities.Value; } }
    }
    public class Country {
        public int Id { get; set; }
        public string CountryName { get; set; }
    }

    public static class CountryData {
        private static readonly Lazy<List<Country>> countries = new Lazy<List<Country>>(() => {
            return new List<Country>()
                {
            new Country() { Id = 0, CountryName = "USA" },
            new Country() { Id = 1, CountryName = "Germany" },
            new Country() { Id = 2, CountryName = "Japan" }
        };
        });
        public static List<Country> Countries { get { return countries.Value; } }
    }
}

Run Demo: ComboBox - Cascading Lists View Example: Grid - Implement Cascading ComboBoxes

You can validate the ComboBox’s Value in the standard EditForm. If you handle the ValueChanged event and cannot use two-way binding, specify the ValueExpression property to identify the value passed to the event handler.