Search results

Prevent closing of modal dialog

You can prevent closing of modal dialog by setting the OnClose event argument cancel value to true. In the following sample, the dialog is closed when you enter the username value with minimum 4 characters. Otherwise, it will not be closed.

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

<EjsButton @onclick="@OnClicked">Open Dialog</EjsButton>
<EjsDialog  ID="dialog" @ref="DialogObj" IsModal="true" Width="300px">
    <DialogEvents OnClose="Validation"></DialogEvents>
    <DialogTemplates>
        <Header> <div id="heading">Sign in</div> </Header>
        <Content>
            <div id='input-container'>
                <div class="e-float-input e-input-group">
                    <input id="username" required="" type="text" bind="@Textvalue" />
                    <span class="e-float-line"></span>
                    <label class="e-float-text">Username</label>
                </div>
            </div>
            <div class='form-group'>
                <div class="e-float-input e-input-group">
                    <input id="username" required="" type="text" bind="@Textvalue2" />
                    <span class="e-float-line"></span>
                    <label class="e-float-text">Password</label>
                </div>
            </div>
        </Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton ButtonModel="@DialogBtn" OnClick="@OnClick"/>
    </DialogButtons>
</EjsDialog>

<style>
    #dialog.e-dialog .e-dlg-header-content .e-dlg-header {
        text-align: center;
        width:100%;
        color: #333;
        font-weight: bold;
        font-size: 20px;
    }
    #input-container .e-float-input { /* csslint allow: adjoining-classes */
      margin: 17px 0;
    }
    .e-footer-content {
        padding: 20px 0 0;
        width: 100%;
    }
    .e-dialog .e-footer-content .e-btn {
        width: 100%;
        height: 36px;
    }
    #heading {
        color: #333;
        font-weight: bold;
        margin: 0 0 15px;
        text-align: center;
        font-size: 20px;
    }
    #dialog.e-dialog .e-footer-content {
        padding: 0 18px 18px;
    }
    #dialog.e-dialog .e-footer-content .e-btn {
        margin-left: 0;
    }
</style>

@code {
    EjsDialog DialogObj;
    private string Textvalue { get; set; } = "";
    private string Textvalue2 { get; set; } = "";

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

    private void OnClicked()
    {
        this.DialogObj.Show();
    }

    private void Validation(BeforeCloseEventArgs args)
    {
        if (Textvalue == "" && Textvalue2 == "")
        {
            args.Cancel = true;
            Console.WriteLine("clicked");
        } else if (Textvalue == "") {
            args.Cancel= true;
            Console.WriteLine("Enter the username");
        } else if (Textvalue2 == "") {
            args.Cancel= true;
            Console.WriteLine("Enter the password");
        } else if (Textvalue.Length < 4) {
            args.Cancel= true;
            Console.WriteLine("Username must be minimum 4 characters");
        } else {
            args.Cancel= false;
            Textvalue = "";
            Textvalue2 = "";
        }
    }

    public Syncfusion.EJ2.Blazor.Buttons.ButtonModel DialogBtn = new Syncfusion.EJ2.Blazor.Buttons.ButtonModel { Content = "Log in", IsPrimary = true };
}

The output will be as follows.

dialog