Skip to main content
All docs
V25.1
  • ComboBox - Multiple Columns

    • 2 minutes to read

    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.

    @using StaffData
    
    <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