DxComboBox<TData, TValue>.Data Property

Specifies a strongly typed collection that supplies ComboBox data.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.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.

Razor

@using BlazorApp.Data

<DxComboBox Data="@Staff.DataSource"
            @bind-Value="@SelectedPerson"
            TextFieldName="@nameof(Person.Text)"
            AllowUserInput="true">
</DxComboBox>

@code {
  Person SelectedPerson { get; set; } = Staff.DataSource[0];
}

Person

namespace BlazorApp.Data {
    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.)";
    }

    public enum Department { Motors, Electronics, Software }

    public override bool Equals(object obj) {
        if (obj is Person typedObj) {
            return (this.Id == typedObj.Id) && (this.FirstName == typedObj.FirstName) && (this.LastName == typedObj.LastName) 
            && (this.Department == typedObj.Department);
        }
        return base.Equals(obj);
    }
}

Staff

using System;
using System.Collections.Generic;

namespace BlazorApp.Data {
    public static class Staff {
        private static readonly Lazy<List<Person>> dataSource = new Lazy<List<Person>>(() => {
            var dataSource = new List<Person>() {
                new Person() { Id= 0 , FirstName="John", LastName="Heart", Department=Department.Electronics },
                new Person() { Id= 1 , FirstName="Samantha", LastName="Bright", Department=Department.Motors },
                new Person() { Id= 2 , FirstName="Arthur", LastName="Miller", Department=Department.Software },
                new Person() { Id= 3 , FirstName="Robert", LastName="Reagan", Department=Department.Electronics },
                new Person() { Id= 4 , FirstName="Greta", LastName="Sims", Department=Department.Motors },
                new Person() { Id= 5 , FirstName="Brett", LastName="Wade", Department=Department.Software },
                new Person() { Id= 6 , FirstName="Sandra", LastName="Johnson", Department=Department.Electronics },
                new Person() { Id= 7 , FirstName="Edward", LastName="Holmes", Department=Department.Motors },
                new Person() { Id= 8 , FirstName="Barbara", LastName="Banks", Department=Department.Software },
                new Person() { Id= 9 , FirstName="Kevin", LastName="Carter", Department=Department.Electronics },
                new Person() { Id= 10, FirstName="Cynthia", LastName="Stanwick", Department=Department.Motors },
                new Person() { Id= 11, FirstName="Sam", LastName="Hill", Department=Department.Electronics }};
            return dataSource;
        });
        public static List<Person> DataSource { get { return dataSource.Value; } }
    }
}

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, you want to show the following enumeration 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
}

To do this, 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.

Razor

@using System.ComponentModel.DataAnnotations;
@using Education.Data

<DxComboBox Data="EducationDegrees" 
            TextFieldName="@nameof(EducationDegree.DisplayName)"
            ValueFieldName="@nameof(EducationDegree.Value)" 
            @bind-Value="@Value"
            AllowUserInput="true"></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();
    }
}

Education

using System;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Reflection;

namespace Education.Data {
    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
    }

    public class EducationDegree {
        public EducationType Value { get; set; }
        public string DisplayName { get; set; }
    }

    public static class Extensions {
        public static TAttribute GetAttribute<TAttribute>(this Enum enumValue)
                where TAttribute : Attribute {
            return enumValue.GetType()
                            .GetMember(enumValue.ToString())
                            .First()
                            .GetCustomAttribute<TAttribute>();
        }
    }
}

View Example: ComboBox for Blazor - Bind to an enumeration