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

DxDropDownEditSettings.DropDownDirection Property

Specifies the direction in which the drop-down window is displayed in relation to the editor’s input element.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[DefaultValue(DropDownDirection.Down)]
[Parameter]
public DropDownDirection DropDownDirection { get; set; }

#Property Value

Type Default Description
DropDownDirection Down

An enumeration value.

Available values:

Name Description
Down

A drop-down window is displayed below an editor’s input element.

Up

A drop-down window is displayed up an editor’s input element.

#Remarks

Set this property to Up to display the drop-down window above the editor’s input element.

Note

If the editor’s position within the browser viewport does not leave enough space to display the drop-down window in the specified direction, the drop-down window is displayed in the opposite direction instead.

The following code snippet displays the drop-down window above a combo box editor’s input element:

Drop-Down Direction

@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"
                                    DropDownDirection="DropDownDirection.Up" />
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="ProductName" Width="25%" />
        <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 the direction at runtime, use the IDropDownEditSettings.DropDownDirection property.

#Implements

See Also