DxComboBox<TData, TValue>.Data Property

Specifies a strongly typed collection that supplies ComboBox data.

Assembly: DevExpress.Blazor.v23.2.dll

Declaration

[Parameter]
public IEnumerable<TData> Data { get; set; }

Property Value

Type	Description
IEnumerable<TData>	A data collection.

Remarks

Strongly Typed Collection

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.

The following sample demonstrates how to bind the ComboBox to an array of string values:

 <DxComboBox Data="@(new string[] { "London", "Berlin", "Paris" })"></DxComboBox>

ComboBox Sample Data

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; }
}

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.

Custom Object Collection

You can bind the ComboBox to a data collection (Data) that stores custom objects (IEnumerable<CustomType>). The Value property can also contain a custom object. In this case, you need to override the custom object’s Equals method. Otherwise, the ComboBox uses the default Equals method implementation to compare items in the Data collection and the Value item. This method determines whether two object instances are equal. The compared items will not be equal if they are different instances (even if they have exactly the same properties). As a result, the component will not display a selected item.

You also need to set the TextFieldName property. It specifies the custom object’s field name that returns strings to be shown in the ComboBox drop-down window. If the TextFieldName property is not specified, the ComboBox component searches for a Text field in the data source and uses this field as a text field. Otherwise, the ComboBox is populated with CustomType.ToString() values.

@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];
}

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);
    }
}

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; } }
    }
}

ComboBox CustomObject

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
Education

@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();
    }
}

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>();
        }
    }
}

Combo Box - Enum example

View Example: ComboBox for Blazor - Bind to an enumeration

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

DxComboBox<TData, TValue>.Data Property

Declaration

Property Value

Remarks

Strongly Typed Collection

Custom Object Collection

Bind to an Enumeration