Skip to main content

DxListEditorColumn Class

A multi-column editor’s column.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxListEditorColumn :
    ComponentBase,
    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

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
DxListEditorColumn
See Also