Back to Devexpress

DxDropDown.CloseMode Property

blazor-devexpress-dot-blazor-dot-dxdropdown-66b06c3a.md

latest3.2 KB
Original Source

DxDropDown.CloseMode Property

Specifies how the DropDown behaves when it does not meet the position restrictions.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp
[DefaultValue(DropDownCloseMode.Hide)]
[Parameter]
public DropDownCloseMode CloseMode { get; set; }

Property Value

TypeDefaultDescription
DropDownCloseModeHide

A DropDownCloseMode enumeration value.

|

Available values:

NameDescription
None

A DropDown stays visible.

| | Hide |

A DropDown is hidden.

| | Close |

A DropDown is closed.

|

Remarks

DropDown allows you to restrict its position. Use the CloseMode property to specify how the component behaves when it does not meet the position restrictions.

Run Demo: DropDown - Automatic Position Adjustment

razor
<OptionsContent>
    <OptionComboBox Label="Close mode:" CssClass="ow-100" Data="@CloseModeSource" @bind-Value="@CloseMode"/>
    <OptionCheckBox Label="Fit to container" @bind-Checked="FitToRestriction"/>
</OptionsContent>
<ChildContentWithParameters Context="Params">
    <div class="@(IsMobile ? "" : "card") flipping-overflow-container">
        <dxbl-demo-scrollable center-horizontally center-vertically id="flipping-target-container" class="flipping-overflow-content">
            <DxButton
                CssClass="flipping-button" Click="() => IsOpen = !IsOpen"
                RenderStyle="@ButtonRenderStyle.Secondary"
                aria-describedby="dropDown-flipping">SHOW A DROPDOWN</DxButton>
        </dxbl-demo-scrollable>
        <DxDropDown
            @bind-IsOpen="@IsOpen"
            Id="dropDown-flipping"
            CloseOnOutsideClick="false"
            PositionMode="DropDownPositionMode.Bottom"
            PositionTarget=".flipping-button"
            RestrictionTarget=".flipping-overflow-container"
            RestrictionMode="DropDownRestrictionMode.TargetElement"
            PreventCloseOnPositionTargetClick="true"
            CloseMode="@CloseMode"
            FitToRestriction="@FitToRestriction"
            FooterVisible="true"
            SizeMode="Params.SizeMode"
            Width="240">
            <BodyContentTemplate>
                <span class="fs-75">@Constants.ContentShort</span>
            </BodyContentTemplate>
            <FooterContentTemplate>
                <DxButton CssClass="popup-button my-1 ms-2" RenderStyle="ButtonRenderStyle.Primary" Text="OK" Click="@context.CloseCallback" />
                @* ... *@
</ChildContentWithParameters>

@code {

    [Inject]
    @* ... *@
            await EnvironmentInfo.InitializeRuntime();

See Also

DxDropDown Class

DxDropDown Members

DevExpress.Blazor Namespace