DxListBox<TData, TValue>.Data Property

Specifies a strongly typed collection that supplies List Box data.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

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 List Box to a strongly typed collection. Initialize this collection in the OnInitialized lifecycle method or before this method is invoked. The following sample demonstrates how to bind the List Box to an array of string values:

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

ListBox Sample Data

You can also set the Data property to the name of a variable that stores the data source.

<DxListBox Data="@Cities" @bind-Values="@Values"></DxListBox>

@code {
  IEnumerable<string> Cities = new List<string>() {
    "London",
    "Berlin",
    "Paris",
  };

  IEnumerable<string> Values { get; set; }
}

If you bind the List Box 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 to be shown in the List Box’s drop-down window.

@using BlazorApp.Data

<DxListBox Data="@Staff.DataSource"
           @bind-Values="@Values"
           TextFieldName="@nameof(Person.Text)">
</DxListBox>

@code {
  IEnumerable<string> Values { get; set; }
}

ListBox CustomObject

Otherwise, the List Box’s items are populated with CustomType.ToString() values.

Run Demo: List Box - Overview

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.

See Also