DxComboBox<TData, TValue>.Data Property
Specifies a strongly typed collection that supplies ComboBox data.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v21.1.dll
NuGet Package: DevExpress.Blazor
Declaration
[Parameter]
public IEnumerable<TData> Data { get; set; }
Property Value
Type | Description |
---|---|
IEnumerable<TData> | A data collection. |
Remarks
Use the Data property to bind the ComboBox to a strongly typed collection or enumeration. Initialize this object in the OnInitialized lifecycle method or before this method is invoked.
Bind to a standard-type collection
The following sample demonstrates how to bind the ComboBox to an array of string values:
<DxComboBox Data="@(new string[] { "London", "Berlin", "Paris" })"></DxComboBox>
You can also set the Data property to the name of a variable that stores the data collection.
<DxComboBox Data="@Cities" @bind-Value="@Value"></DxComboBox>
@code {
IEnumerable<string> Cities = new List<string>() {
"London",
"Berlin",
"Paris",
};
string Value { get; set; }
}
Bind to a custom-type collection
If you bind the ComboBox to a data collection that stores custom objects (IEnumerable<CustomType>
), override the object’s Equals method and set the TextFieldName property. This property specifies the custom object’s field name that returns strings for the ComboBox’s drop-down window.
@using BlazorApp.Data
<DxComboBox Data="@Staff.DataSource"
@bind-Value="@SelectedPerson"
TextFieldName="@nameof(Person.Text)">
</DxComboBox>
@code {
Person SelectedPerson { get; set; } = Staff.DataSource[0];
}
Otherwise, the ComboBox’s items are populated with CustomType.ToString()
values.
Use the DataAsync property instead of the Data property if a strongly typed collection is loaded asynchronously (for instance, from an HTTP request). Use the CustomData property if your data is stored on a remote service and is loaded through a Web API.
Bind to an enumeration
To bind the ComboBox to an enumeration, create a wrapper class that obtains Enum
values and passes them to the component’s Data property. For instance, if you want to show the following enumeration’s items in the ComboBox…
using System.ComponentModel.DataAnnotations;
public enum EducationType
{
[Display(Name = "Not Stated")]
NoInfo = 0,
[Display(Name = "High school")]
School = 1,
[Display(Name = "College")]
College = 2,
[Display(Name = "University Degree")]
UniversityDegree = 3,
[Display(Name = "PhD")]
PhD = 4
}
…declare a wrapper class with two properties:
public class EducationDegree
{
// Specifies an enumeration value
public EducationType Value { get; set; }
// Specifies text to display in the ComboBox
public string DisplayName { get; set; }
}
Create a generic extension method that gets the Display attribute’s Name value from the enumeration’s item.
using System;
using System.Linq;
using System.Reflection;
public static class Extensions
{
public static TAttribute GetAttribute<TAttribute>(this Enum enumValue)
where TAttribute : Attribute
{
return enumValue.GetType()
.GetMember(enumValue.ToString())
.First()
.GetCustomAttribute<TAttribute>();
}
}
Add the ComboBox to a project and override the OnInitialized lifecycle method that creates a match between integer and string values of the enumeration’s item.
@using System.ComponentModel.DataAnnotations;
@using Education.Data
<DxComboBox Data="EducationDegrees"
TextFieldName="@nameof(EducationDegree.DisplayName)"
ValueFieldName="@nameof(EducationDegree.Value)"
@bind-Value="@Value"></DxComboBox>
@code {
public List<EducationDegree> EducationDegrees { get; set; } = new List<EducationDegree>();
int Value { get; set; } = 0;
protected override void OnInitialized()
{
//...
EducationDegrees = Enum.GetValues(typeof(EducationType))
.OfType<EducationType>()
.Select(t => new EducationDegree()
{
Value = t,
DisplayName = t.GetAttribute<DisplayAttribute>().Name
}).ToList();
base.OnInitialized();
}
}