Prevent opening of the dialog

1 Mar 202211 minutes to read

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

CSHTML

<div id="container">
    <div class="login-form">
        <div class='wrap'>
            <div id="heading">Sign in</div>
            <div id="input-container">
                <div class="e-float-input e-input-group">
                    <input id="textvalue" type="text" required />
                    <span class="e-float-line"></span>
                    <label class="e-float-text">Username</label>
                </div>
                <div class="e-float-input e-input-group">
                    <input id="textvalue2" type="password" required />
                    <span class="e-float-line"></span>
                    <label class="e-float-text">Password</label>
                </div>
            </div>
            <div class="button-contain">
                <button class="e-control e-btn e-info" id="targetButton" role="button" e-ripple="true">Log in</button>
            </div>
        </div>
    </div>
    @Html.EJS().Dialog("dialog").Header("Dialog").Created("onCreated").BeforeOpen("validation").Visible(false).Content("This is a Dialog with full screen display.").Target("#container").Width("250px").Buttons(btn=> {
    btn.Click("dlgButtonClick").ButtonModel(ViewBag.DialogButtons).Add();
    }).Render()
</div>

<script>
    // To get the all input fields and its container.
    var dialogObj;
    function onCreated() {
        dialogObj = this;
    }

    let inputElement = document.querySelectorAll('.e-input-group .e-input,.e-float-input.e-input-group input');

    // Add 'e-input-focus' class to the input for achive ripple effect when focus on the input field.

    for (let i = 0; i < inputElement.length; i++) {
        inputElement[i].addEventListener("focus", function () {
            let parentElement = this.parentNode;
            if (parentElement.classList.contains('e-input-in-wrap')) {
                parentElement.parentNode.classList.add('e-input-focus');
            } else {
                this.parentNode.classList.add('e-input-focus');
            }
        });
        inputElement[i].addEventListener("blur", function () {
            let parentElement = this.parentNode;
            if (parentElement.classList.contains('e-input-in-wrap')) {
                parentElement.parentNode.classList.remove('e-input-focus');
            } else {
                this.parentNode.classList.remove('e-input-focus');
            }
        });
    }

    // Add 'e-input-btn-ripple' class to the icon element for achive ripple effect when click on the icon.

    var inputIcon = document.querySelectorAll('.e-input-group-icon');
    for (let i = 0; i < inputIcon.length; i++) {
        inputIcon[i].addEventListener('mousedown', function () {
            this.classList.add('e-input-btn-ripple');
        });
        inputIcon[i].addEventListener('mouseup', function () {
            let element = this;
            setTimeout(function () {
                element.classList.remove('e-input-btn-ripple');
            }, 500);
        });
    }
    document.getElementById('targetButton').onclick = function () {
        dialogObj.show();
    };
    function dlgButtonClick() {
        dialogObj.hide();
    }

    function validation(args) {
        let text = document.getElementById('textvalue');
        let text1 = document.getElementById('textvalue2');
        if (text.value === "" && text1.value === "") {
            args.cancel = true;
            alert("Enter the username and password")
        } else if (text.value === "") {
            args.cancel = true;
            alert("Enter the username")
        } else if (text1.value === "") {
            args.cancel = true;
            alert("Enter the password")
        } else if (text.value.length < 4) {
            args.cancel = true;
            alert("Username must be minimum 4 characters")
        } else {
            args.cancel = false;
            document.getElementById("textvalue").value = "";
            document.getElementById("textvalue2").value = "";
        }
    }
</script>

<style>
    html,
    body,
    #container {
        height: 100%;
        overflow: hidden;
        width: 100%;
    }

    #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;
    }

    .text-center {
        text-align: center;
    }

    .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;
    }

    .wrap {
        box-sizing: border-box;
        margin: 0 auto;
        width: 260px;
    }

    #dialog.e-dialog .e-footer-content {
        padding: 0 18px 18px;
    }

        #dialog.e-dialog .e-footer-content .e-btn {
            margin-left: 0;
        }
</style>

Controller.cs

public class HomeController : Controller
{

    public class ButtonModel
    {
        public string content { get; set; }
        public bool isPrimary { get; set; }
    }
    public ActionResult Index()
    {
        ViewBag.DialogButtons = new ButtonModel() { isPrimary = true, content = "Dismiss" };
        return View();
    }

}