Skip to main content
All docs
V25.1
  • DxComboBox<TData, TValue>.Columns Property

    Allows you to add columns to the ComboBox.

    Namespace: DevExpress.Blazor

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

    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];
    }
    

    ComboBox - Multiple Columns

    Run Demo: ComboBox – Multiple Columns

    See Also