Skip to main content

DxComboBoxSettings.DropDownWidthMode Property

Specifies the width of the combo box editor’s drop-down list.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(DropDownWidthMode.ContentOrEditorWidth)]
[Parameter]
public DropDownWidthMode DropDownWidthMode { get; set; }

Property Value

Type Default Description
DropDownWidthMode ContentOrEditorWidth

An enumeration value.

Available values:

Name Description
ContentOrEditorWidth

The list displays item text completely. The minimum list width matches the editor.

ContentWidth

The list width is equal to the width of the longest list item.

EditorWidth

The list width matches the editor. List items are cut if they do not fit.

Remarks

This property allows you to specify the width of the drop-down list displayed in the combo box editor. The following values are available:

ContentOrEditorWidth (Default)

The list displays item text completely. The minimum list width matches the editor.

ComboBox Content or Editor Width

ContentWidth

The list width is equal to the width of the longest list item.

ComboBox Content Width

EditorWidth

The list width matches the editor. List items are cut if they do not fit.

ComboBox Editor Width

Note

When the combo box editor is in virtual scrolling mode, the list width can change while the user scrolls the list up or down.

The following code snippet makes the width of the drop-down list equal to the combo box width:

ComboBox in Grid

@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"
                                    DropDownWidthMode="DropDownWidthMode.EditorWidth" />
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="ProductName" />
        <DxGridDataColumn FieldName="UnitPrice" />
        <DxGridDataColumn FieldName="UnitsInStock" />
        <DxGridDataColumn FieldName="QuantityPerUnit" />
    </Columns>
</DxGrid>

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

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

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

To change drop-down list width at runtime, use the IComboBoxSettings.DropDownWidthMode property.

Implements

See Also