DxListBox<TData, TValue>.Data Property

Specifies a strongly typed collection that supplies List Box data.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

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 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" })" 
           TData="string" 
           TValue="string">
</DxListBox>

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

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 List Box to a data collection (Data) that stores custom objects (IEnumerable<CustomType>). The Values collection can also contain custom objects. In this case, you need to override the following methods for your custom object:

• GetHashCode. The List Box uses hash codes to compare items. Override this method to make sure that compared objects have the same hash code.

• Equals. The default Equals 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 the selected items.

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

Razor

<DxListBox Data="_roles"
            @bind-Values="_roleValues"
            TextFieldName="Name"
            SelectionMode="ListBoxSelectionMode.Multiple"/>

@code {
    IEnumerable<EmployeeRole> _roles;
    IEnumerable<EmployeeRole> _roleValues;

    public partial class EmployeeRole {
        public int RoleId { get; set; }
        public string Name { get; set; }

        public override bool Equals(object obj) {
            return obj is EmployeeRole role && role.RoleId == RoleId && role.Name == Name;
        }

        public override int GetHashCode() {
            return HashCode.Combine(RoleId, Name);
        }

        public static IEnumerable<EmployeeRole> GetRoles() {
            return new List<EmployeeRole>() {
                new EmployeeRole() { RoleId = 1,  Name = "Admin"} ,
                new EmployeeRole() { RoleId = 2, Name = "Network" },
                new EmployeeRole() { RoleId = 3, Name = "Support" },
                new EmployeeRole() { RoleId = 4, Name = "Tester"  }
            };
        }
    }

    protected override async Task OnInitializedAsync() {
        _roles = EmployeeRole.GetRoles();
        _roleValues = new EmployeeRole[] {
            new EmployeeRole() { RoleId = 2, Name = "Network" },
            new EmployeeRole() { RoleId = 3, Name = "Support" },
            new EmployeeRole() { RoleId = 4, Name = "Tester" }
        };
    }
}

Implements

DevExpress.Blazor.IListBox<TData, TValue>.Data