Skip to main content
All docs
V25.1
  • 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.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    [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