Back to Devexpress

DxDropDownBox.DropDownDirection Property

blazor-devexpress-dot-blazor-dot-dxdropdownbox-f5325c37.md

latest3.1 KB
Original Source

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.2.dll

NuGet Package : DevExpress.Blazor

Declaration

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

Property Value

TypeDefaultDescription
DropDownDirectionDown

The direction.

|

Available values:

NameDescription
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

razor
<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

See Also

DxDropDownBox Class

DxDropDownBox Members

DevExpress.Blazor Namespace