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.v24.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);
    }
}

Implements

DropDownDirection