blazor-devexpress-dot-blazor-dot-dxcombobox-2-4e7a96f6.md
Fires after the ComboBox’s selected value changed.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
[Parameter]
public EventCallback<TValue> ValueChanged { get; set; }
| Type | Description |
|---|---|
| TValue |
The value type.
|
Use the ValueChanged event to handle changes to the ComboBox’s selected value.
The following code snippet populates a ComboBox editor with items based on another ComboBox’s selection.
@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];
}
}
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.
You can also use the ValueChanging event to validate/cancel item selection.
See Also
DxComboBox<TData, TValue> Class