DxDropDown.Showing Event

Fires before the drop-down window is displayed.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public EventCallback<DropDownShowingEventArgs> Showing { get; set; }

Event Data

The Showing event's data class is DropDownShowingEventArgs. The following properties provide information specific to this event:

Property	Description
Cancel	Gets or sets a value indicating whether the event should be canceled. Inherited from CancelEventArgs.
CancellationToken	Specifies an object that propagates a cancellation notification.

Remarks

The Showing event fires before the drop-down window is displayed and allows you to cancel the action. This event occurs in the following cases:

• You set the IsOpen property to true.
• You call the ShowAsync method.

Set the event argument’s Cancel property to true to cancel the action.

You can handle the Shown event that fires after the drop-down window is displayed. To process close actions, handle the Closing and Closed events.

The following example allows users to display the drop-down window only after they enable the checkbox:

<div>
    <DxCheckBox @bind-Checked="@Checked">Allow Drop-Down Window</DxCheckBox>
    <DxButton Id="button" RenderStyle="ButtonRenderStyle.Primary" Text="Show" Click="() => IsOpen = true" />
</div>

<DxDropDown @bind-IsOpen="@IsOpen"
            HeaderText="Header"
            BodyText="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet metus vel
             nisi blandit tincidunt vel efficitur purus."
            Width="400"
            PositionTarget="#button"
            PositionMode="DropDownPositionMode.Bottom"
            Showing="WindowShowing"
            Shown="WindowShown">
</DxDropDown>
@code {
    bool Checked { get; set; }
    bool IsOpen { get; set; }

    void WindowShowing(DropDownShowingEventArgs args) {
        args.Cancel = !Checked;
    }
    void WindowShown(DropDownShownEventArgs args) {
        Checked = false;
    }
}