DxComboBox<TData, TValue>.Columns Property

Allows you to add columns to the ComboBox.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type	Description
RenderFragment	A collection of columns (UI fragments).

Remarks

The ComboBox control can display data across multiple columns. Follow the steps below to create columns:

1. Add a <Columns> tag to the component’s markup to declare the column collection.

2. Populate the Columns collection with DxListEditorColumn objects. These objects include the following properties:

   • Caption - Specifies the column’s caption text.
   • FieldName - Specifies the data source field that populates column items in multi-column editors.
   • SearchEnabled - Specifies whether the component can search text in cells of the current column.
   • Visible - Specifies whether the column is visible.
   • VisibleChanged - Fires when the column visibility changes.
   • VisibleIndex - Specifies a column’s position among other columns.
   • VisibleIndexChanged - Fires when the column’s visible index changes.
   • Width - Specifies the column’s width.

To format an edit box’s value, use the EditFormat property.

<DxComboBox Data="@Staff.DataSource"
            @bind-Value="@SelectedPerson"
            EditFormat ="{1} {2}">
    <Columns>        
        <DxListEditorColumn FieldName="Id" Width="50px" />
        <DxListEditorColumn FieldName="FirstName" Caption="Name"/>
        <DxListEditorColumn FieldName="LastName" Caption="Surname"/>
    </Columns>
</DxComboBox>

@code {
    Person SelectedPerson { get; set; } = Staff.DataSource[0];
}

Run Demo: ComboBox – Multiple Columns

Watch Video: ComboBox - Multiple Columns and Cascade Lists