Search results

Close dialog while click on outside of dialog

By default, dialog can be closed by pressing Esc key and clicking the close icon at the right of dialog header. It can also be closed by clicking outside of the dialog using hide method. Set the CloseOnEscape property value to false to prevent closing of the dialog when pressing Esc key.

In the following code, dialog is closed when clicking outside the dialog area using Hide method.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Popups
@using Syncfusion.EJ2.Blazor.Buttons

<div id="target" @onclick="@TargetClicked">
    <EjsButton @onclick="@OnClicked">Open Dialog</EjsButton>
    <EjsDialog @ref="DialogObj" Target="#target" Width="300px" ShowCloseIcon="true" CloseOnEscape="false">
        <DialogTemplates>
            <Header> Delete Multiple Items</Header>
            <Content> Are you sure you want to permanently delete all of these items? </Content>
        </DialogTemplates>
        <DialogButtons>
            <DialogButton ButtonModel="@DialogBtn" OnClick="@OnClick" />
            <DialogButton ButtonModel="@DialogBtn2" OnClick="@OnClick" />
        </DialogButtons>
    </EjsDialog>
</div>

<style>
    #target {
        min-height: 450px;
        height: 100%;
    }
</style>

@code {
    EjsDialog DialogObj;

    private void OnClick(Object args)
    {
        this.DialogObj.Hide();
    }
    private void OnClicked()
    {
        this.DialogObj.Show();
    }
    private void TargetClicked()
    {
        this.DialogObj.Hide();
    }

    public Syncfusion.EJ2.Blazor.Buttons.ButtonModel DialogBtn = new Syncfusion.EJ2.Blazor.Buttons.ButtonModel { Content = "Yes", IsPrimary = true };
    public Syncfusion.EJ2.Blazor.Buttons.ButtonModel DialogBtn2 = new Syncfusion.EJ2.Blazor.Buttons.ButtonModel { Content = "No" };
}