Skip to main content
All docs
V25.1
  • DxDropDownBox.DropDownDirection Property

    Specifies the direction in which the drop-down window is displayed relative 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

    The direction.

    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

    Note

    If the editor is close to a browser window’s edge and there is not enough space to display the drop-down window in the specified direction, the drop-down window is displayed in the opposite direction.

    Run Demo: DropDownBox

    <DxDropDownBox @bind-Value="Value" 
                   QueryDisplayText="QueryText" 
                   DropDownDirection="DropDownDirection.Up" >
        <DropDownBodyTemplate>
            <DxListBox Data="@ListBoxData" TData="Employee" TValue="Employee"
                        Values="@(GetListBoxValues(context.DropDownBox))"
                        ValuesChanged="@(values => ListBoxValuesChanged(values, context.DropDownBox))"
                        TextFieldName="@nameof(Employee.Text)"
                        SelectionMode="ListBoxSelectionMode.Multiple"
                        ShowCheckboxes="true"
                        CssClass="templateListbox"
                        SizeMode="Params.SizeMode"
                        >
            </DxListBox>
        </DropDownBodyTemplate>
    </DxDropDownBox>
    
    @code {
        IEnumerable<Employee> ListBoxData { get; set; }
        object Value { get; set; }
    
        string QueryText(DropDownBoxQueryDisplayTextContext arg) {
            var names = (arg.Value as IEnumerable<Employee>)?.Select(x => x.LastName);
            return names != null ? string.Join(",", names) : string.Empty;
        }
        IEnumerable<Employee> GetListBoxValues(IDropDownBox dropDownBox) {
            return dropDownBox.Value as IEnumerable<Employee>;
        }
        void ListBoxValuesChanged(IEnumerable<Employee> values, IDropDownBox dropDownBox) {
            dropDownBox.BeginUpdate();
            dropDownBox.Value = values;
            dropDownBox.EndUpdate();
        }
        protected override async Task OnInitializedAsync() {
            ListBoxData = await NwindDataService.GetEmployeesAsync();
            Value = ListBoxData.Take(2);
        }
    }
    

    DropDownBox the drop-down window tha opens in up direction

    Implements

    See Also