Skip to main content

DxListEditorColumn Class

A multi-column editor’s column.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxListEditorColumn :
    ParameterTrackerSettingsComponent,
    IListEditorColumnComponent,
    IListEditorColumn

Remarks

The following DevExpress Blazor components 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. Specify the data source field that populates column cells.
  4. Set the DxListEditorColumn properties to customize the column’s appearance as needed.

The following code snippet adds three columns to the ListBox 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.

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