Skip to main content

DxComboBoxSettings.Columns Property

Allows you to add columns to the combo box editor.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment Columns { get; set; }

Property Value

Type Description
RenderFragment

A collection of columns (UI fragments).

Remarks

Place DxListEditorColumn objects in the <Columns> tag to display multiple columns in the combo box editor’s drop-down window. Set the object’s FieldName property to bind the column to data. The following optional properties of the DxListEditorColumn class allow you to customize column appearance:

Caption
Specifies the column’s caption text.
ColumnCellDisplayTemplate
Specifies a template used to display column cells in the combo box editor.
Visible
Specifies the column’s visibility.
VisibleIndex
Specifies the column’s visible index.
Width
Specifies the column’s width.

The EditFormat property allows you to format the edit value of a multi-column combo box.

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

To add/remove columns to/from the combo box at runtime, use the IComboBoxSettings.Columns property.

Implements

See Also