DxComboBox<TData, TValue>.Columns Property

Allows you to add columns to the ComboBox.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.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:

   • FieldName - Specifies the data source field that populates column items.
   • Caption - Specifies the column header.
   • Visible - Specifies column visibility.
   • VisibleIndex - Specifies column position.
   • Width - Specifies column 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