Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxListEditorColumn Class

A multi-column editor’s column.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
public class DxListEditorColumn :
    ParameterTrackerSettingsComponent,
    IListEditorColumnComponent,
    IListEditorColumn

#Remarks

The following editors can display data across multiple columns:

Follow the steps below to create columns:

  1. Add <Columns>...</Columns> to the component’s markup to define the Columns collection.
  2. Fill the Columns collection with DxListEditorColumn objects. These objects include the following customization options:

    • FieldName - Specifies the data source field that populates column items.
    • Caption - Specifies the column header.
    • Visible - Specifies the column visibility.
    • VisibleIndex - Specifies the column display order.
    • Width - Specifies the column width.

The following code snippet adds three columns to the List Box component.

@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

The following video shows how to add multiple columns to the ComboBox component.

Watch Video: ComboBox - Multiple Columns and Cascading Lists

#Auto-Generated Multi-Column Editors in Grid

The Grid component generates and configures cell editors for individual columns based on associated data types. The component displays these cell editors in the filter row and edit cells. Refer to the following topics for more information:

You can configure an auto-generated combo box to display multiple columns in the dropdown in the same way as for a standalone editor.

The following code snippet adds three columns to the combo box editor and formats its edit value:

Checkbox Settings

@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory

<DxGrid Data="Orders"
        EditMode="GridEditMode.EditRow">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="EmployeeId" Caption="Employee" Width="20%">
            <EditSettings>
                <DxComboBoxSettings Data="Employees"
                                    TextFieldName="LastName"
                                    ValueFieldName="EmployeeId"
                                    EditFormat="{1} {2}" >
                    <Columns>
                        <DxListEditorColumn FieldName="EmployeeId" Caption="Id" Width="30px" />
                        <DxListEditorColumn FieldName="FirstName" Caption="Name" />
                        <DxListEditorColumn FieldName="LastName" Caption="Surname" />
                    </Columns>
                </DxComboBoxSettings>
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="ShippedDate" />
        <DxGridDataColumn FieldName="ShipCountry" />
        <DxGridDataColumn FieldName="ShipCity" />
        <DxGridDataColumn FieldName="ShipName" Width="20%" />
    </Columns>
</DxGrid>


@code {
    NorthwindContext Northwind { get; set; }
    List<Order> Orders { get; set; }
    List<Employee> Employees { get; set; }

    protected override async Task OnInitializedAsync() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        Orders = await Northwind.Orders.ToListAsync();
        Employees = await Northwind.Employees.ToListAsync();
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}

#Inheritance

Object
ComponentBase
DevExpress.Blazor.Internal.BranchedRenderComponent
DevExpress.Blazor.Internal.ParameterTrackerSettingsComponent
DxListEditorColumn
See Also