DxDropDown.Closing Event

Fires before the drop-down window is closed.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v26.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public EventCallback<DropDownClosingEventArgs> Closing { get; set; }

Event Data

The Closing event's data class is DropDownClosingEventArgs. 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.
CloseReason	Identifies the action that closes the drop-down window.

Remarks

Use the event argument’s CloseReason property to identify an action that closes the window. You can set the Cancel property to true to cancel the close action.

Handle the Closed event to perform actions after the window is closed.

In the following example, the custom “OK“ button sends a close callback. On the server, this action is canceled until a user selects the checkbox in the footer. However, users can close the window in other ways: they can press Escape or click outside the window’s boundaries.

Razor

<DxButton Id="showDDbtton" Click="() => IsOpen = true">Show Window</DxButton>
<DxDropDown Width="400"
            @bind-IsOpen="@IsOpen"
            FooterVisible="true"
            HeaderText="DevExpress EULA"
            Closing="EulaClosing"
            Closed="EulaClosed">
        <BodyTextTemplate>
            <p> 
                The terms of our license are fully outlined/described in the Developer Express Inc End User
                License Agreement (EULA) included with our product installations. Before you can install and use
                a Developer Express Inc product, you must read, understand and accept the terms/conditions of
                our EULAs. <a target="" _blank"" rel="" noopener noreferrer"" href=""https: //www.devexpress.com/support/eulas/"">More info...</a>
            </p>
        </BodyTextTemplate>
    <FooterContentTemplate>
        <DxCheckBox class="my-margin" @bind-Checked="@EulaAccepted">
            I accept the terms of the EULA
        </DxCheckBox>
        <DxButton RenderStyle="ButtonRenderStyle.Primary" Text="OK" Click="context.CloseCallback" />
    </FooterContentTemplate>
</DxDropDown>

@code {
    bool IsOpen { get; set; } = false;
    bool EulaAccepted { get; set; }

    void EulaClosing(DropDownClosingEventArgs args) {
        if (args.CloseReason == DropDownCloseReason.Programmatically) {
            args.Cancel = !EulaAccepted;
        }
    }
    void EulaClosed(DropDownClosedEventArgs args) {
        EulaAccepted = false;
    }
}

CSS

.my-margin {
    margin-left: 0; 
    margin-right: auto;
}