DxComboBox<TData, TValue>.Columns Property

Allows you to add columns to the ComboBox.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

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

Property Value

A collection of columns (UI fragments).

|

Remarks

The DevExpress Blazor ComboBox control 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. For each DxListEditorColumn object, specify the data source field that populates column cells.
4. Specify the DxListEditorColumn properties to customize the column’s appearance as needed.

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

YouTube video

See Also

DxComboBox<TData, TValue> Class

DxComboBox<TData, TValue> Members

DevExpress.Blazor Namespace