Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxComboBoxSettings Class

Contains settings of an auto-generated combo box editor.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

#Remarks

Grid and TreeList components automatically generate editors for columns based on associated data types. For the enum type, they generate a combo box editor.

You can replace the default editor of any column with a combo box. Refer to the following section for more information: Change a Column Editor to Combo Box.

#Auto-Generated Combo Box in Filter Row and Edit Cells

Grid and TreeList components automatically display column editors in the filter row and in data rows during edit operations. In the following code snippet, the Grid displays a combo box editor for the Summary column (enumerator data type):

Combo Box in Edit Row

@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory

<DxGrid Data="@forecasts"
        ShowFilterRow="true"
        EditMode="GridEditMode.EditRow"
        CssClass="my-class">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="Date" />
        <DxGridDataColumn FieldName="Summary" />
        <DxGridDataColumn Caption="Temperature" FieldName="TemperatureC" />
    </Columns>
</DxGrid>

@code {
    private WeatherForecast[]? forecasts;

    protected override async Task OnInitializedAsync() {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }
}

#Auto-Generated Combo Box in Edit Forms

The inline or pop-up edit form can also display auto-generated editors. To place an editor in a form, add the GetEditor method to the EditFormTemplate.

In the following code snippet, the Grid displays an auto-generated combo box editor for the Summary column:

Combo Box in Edit Form

razor
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory

<DxGrid Data="@forecasts"
    PageSize="7">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="Date" />
        <DxGridDataColumn FieldName="Summary" />
        <DxGridDataColumn Caption="Temperature" FieldName="TemperatureC" />
    </Columns>
    <EditFormTemplate Context="editFormContext">
        <DxFormLayout>
            <DxFormLayoutItem Caption="Date:">
                @editFormContext.GetEditor("Date")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Temperature:">
                @editFormContext.GetEditor("TemperatureC")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Summary:" >
                @editFormContext.GetEditor("Summary")
            </DxFormLayoutItem>
        </DxFormLayout>
    </EditFormTemplate>
</DxGrid>

@code {
    private WeatherForecast[]? forecasts;

    protected override async Task OnInitializedAsync() {
        forecasts = await ForecastService.GetForecastAsync(DateTime.Now);
    }
}

#Display Text in Filter Menu

You can use the DxComboBoxSettings object to format filter list items.

The following code snippet uses the DxComboBoxSettings object to specify the text used to display the Category column’s filter menu items:

razor
<DxGrid Data="GridData"
    FilterMenuButtonDisplayMode="GridFilterMenuButtonDisplayMode.Always"
    @* ... *@
    VirtualScrollingEnabled="true">
    <Columns>
        <DxGridDataColumn FieldName="OrderDate" Width="140px" />
        <DxGridDataColumn FieldName="ProductName" MinWidth="100" />
        <DxGridDataColumn FieldName="CategoryId" Caption="Category" Width="130px">
            <EditSettings>
                <DxComboBoxSettings Data="Categories" ValueFieldName="CategoryId" TextFieldName="CategoryName" />
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c2" Width="140px" />
        <DxGridDataColumn FieldName="Quantity" Width="110px" />
        <DxGridDataColumn FieldName="Discount" DisplayFormat="p0" Width="110px" />
        <DxGridDataColumn FieldName="Total"
                          UnboundType="GridUnboundColumnType.Decimal"
                          UnboundExpression="[UnitPrice] * [Quantity] * (1 - [Discount])"
                          DisplayFormat="c2"
                          Width="110px">
            <FilterMenuTemplate>
                <Grid_Filtering_ColumnFilterMenu_CustomRange FilterContext="context" Items="TotalPriceIntervals" />
            </FilterMenuTemplate>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="Shipped"
                          UnboundType="GridUnboundColumnType.Boolean"
                          UnboundExpression="[ShippedDate] <> Null"
                          Width="100px" />
    </Columns>
</DxGrid>

Filter Menu Item Formatting

#Change a Column Editor to Combo Box

Follow the steps below to replace a column’s default editor with a combo box:

  1. Add DxComboBoxSettings in the column’s EditSettings property.
  2. Specify the Data combo box setting to bind the editor to a data source.
  3. If the data source contains complex data, specify ValueFieldName and TextFieldName settings to supply combo box items with values and corresponding display text strings.

The following code snippet replaces default editors of Category and Unit Price columns with combo boxes:

Combo Box in Edit Form

@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory

<DxGrid Data="Products"
        EditMode="GridEditMode.EditRow">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="CategoryId" Caption="Category">
            <EditSettings>
                <DxComboBoxSettings Data="Categories"
                                    ValueFieldName="CategoryId"
                                    TextFieldName="CategoryName"/>
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="ProductName" />
        <DxGridDataColumn FieldName="UnitPrice">
            <EditSettings>
                <DxComboBoxSettings Data="Prices" DisplayFormat="C" EditFormat="F" />
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="UnitsInStock" />
        <DxGridDataColumn FieldName="QuantityPerUnit" />
    </Columns>
</DxGrid>
@code {
    NorthwindContext Northwind { get; set; }
    List<Product> Products { get; set; }
    List<Category> Categories { get; set; }
    List<decimal?> Prices = new List<decimal?>() { 5, 10, 25, 50, 100};

    protected override async Task OnInitializedAsync() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        Products = await Northwind.Products.ToListAsync();
        Categories = await Northwind.Categories.ToListAsync();
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}

View Example: Create a Foreign Key (ComboBox) Column

#Runtime Customization

At runtime, call the GetColumnEditSettings method to access settings of a combo box editor in the specified column. The following code snippet dynamically disables the editor.

razor
<DxGrid @ref="Grid"
        Data="Products"
        EditMode="GridEditMode.EditRow">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="CategoryId" Caption="Category">
            <EditSettings>
                <DxComboBoxSettings Data="Categories"
                                    ValueFieldName="CategoryId"
                                    TextFieldName="CategoryName"/>
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="ProductName" />
        <DxGridDataColumn FieldName="UnitPrice" />
        <DxGridDataColumn FieldName="UnitsInStock" />
        <DxGridDataColumn FieldName="QuantityPerUnit" />
    </Columns>
</DxGrid>
<DxButton Text="Disable the Category" Click="Button_Click" />

@code {
    IGrid Grid { get; set; }
    NorthwindContext Northwind { get; set; }
    List<Product> Products { get; set; }
    List<Category> Categories { get; set; }

    void Button_Click() {
        var comboBoxSettings = Grid.GetColumnEditSettings<IComboBoxSettings>("CategoryId");
        if(comboBoxSettings != null){
            Grid.BeginUpdate();
            comboBoxSettings.Enabled = false;
            Grid.EndUpdate();
        }
    }

    protected override async Task OnInitializedAsync() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        Products = await Northwind.Products.ToListAsync();
        Categories = await Northwind.Categories.ToListAsync();
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}

#Inheritance

Object
ComponentBase
DevExpress.Blazor.Internal.BranchedRenderComponent
DevExpress.Blazor.Internal.ParameterTrackerSettingsComponent
See Also