Skip to main content
All docs
V25.1

List Box - Multiple Columns

  • 2 minutes to read

The DevExpress Blazor List Box control can display data across multiple columns. Follow the steps below to create columns:

  1. Add <Columns>...</Columns> tag to the component’s markup to declare the column collection.
  2. Populate the column collection with DxListEditorColumn objects. Each object corresponds to a separate column.
  3. For each DxListEditorColumn object, specify the data source field that populates column cells.
  4. Specify the DxListEditorColumn properties to customize the column’s appearance as needed.
@using StaffData

<DxListBox Data="@Staff.DataSource"
           @bind-Values="@Values">
    <Columns>
        <DxListEditorColumn FieldName="Id" Width="50px" />
        <DxListEditorColumn FieldName="FirstName" Caption="Name"/>
        <DxListEditorColumn FieldName="LastName" Caption="Surname"/>
    </Columns>
</DxListBox>

@code {
    IEnumerable<Person> Values { get; set; } = Staff.DataSource.Take(1);
}

List Box - Multiple Columns

Run Demo: List Box – Multiple Columns