Search results

Prevent opening of the dialog

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.

Source
Preview
index.tsx
index.html
styles.css
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DialogComponent } from '@syncfusion/ej2-react-popups';

export default class Default extends React.Component<{}, {}> {
    public userName: HTMLInputElement;
    public password: HTMLInputElement;
    public dialogInstance: DialogComponent;

    private buttons: any = [{
        buttonModel: {
            content: 'DISMISS',
            cssClass: 'e-primary',
            isPrimary: true,
        },
        'click': () => {
            this.dialogInstance.hide();
        }
    }];

    public validation = (args: any): void => {
        if (this.userName.value === "" && this.password.value === "") {
            args.cancel= true;
            alert("Enter the username and password")
        } else if (this.userName.value === "") {
            args.cancel= true;
            alert("Enter the username")
        } else if (this.userName.value === "") {
            args.cancel= true;
            alert("Enter the password")
        } else if (this.userName.value.length < 4) {
            args.cancel= true;
            alert("Username must be minimum 4 characters")
        } else {
            args.cancel= false;
            this.userName.value = "";
            this.password.value = "";
        }
    }
    public onInputFocus = (args: any) => {
        if (!args.target.parentElement.classList.contains('e-input-in-wrap')) {
            args.target.parentElement.classList.add('e-input-focus');
        } else {
            args.target.parentElement.parentElement.classList.add('e-input-focus')
        }
    }

    public onInputBlur = (args: any) => {
        if (!args.target.parentElement.classList.contains('e-input-in-wrap')) {
        args.target.parentElement.classList.remove('e-input-focus');
        } else {
            args.target.parentElement.parentElement.classList.remove('e-input-focus');
        }
    }

    public render() {
        return (
        <div className='App' id='container'>
            <div className="login-form" >
                <div className='wrap'>
                    <div id="heading">Sign in</div>
                    <div className="e-float-input">
                        <input id="textvalue" type="text" required = {true} ref = {user => this.userName = user!} onFocus = {this.onInputFocus} onBlur = {this.onInputBlur}/>
                        <span className="e-float-line"/>
                        <label className="e-float-text">Username</label>
                    </div>
                    <div className="e-float-input">
                        <input id="textvalue2" type="password" required = {true} ref = {pwd => this.password = pwd!} onFocus = {this.onInputFocus} onBlur = {this.onInputBlur}/>
                        <span className="e-float-line"/>
                        <label className="e-float-text">Password</label>
                    </div>
                    <div className="button-contain">
                        <button className="e-control e-btn e-info" id="targetButton" role="button" e-ripple="true" onClick = {this.validation = this.validation.bind(this)} >Log in</button>
                    </div>
                </div>
            </div>
        <DialogComponent id='dialog' header='Success' buttons={this.buttons} beforeOpen = {this.validation} content='Congratulations! Login Success' width='250px' isModal={true} ref={dialog => this.dialogInstance = dialog!} visible={false}
    target='#container'/></div>
        )
    }
}

ReactDOM.render(<Default />, document.getElementById("dialog"));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Dialog</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-inputs/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='container'>
        <div id='input-container'></div>
        <div id="dialog">
            <div id='loader'>Loading....</div>
        </div>
    </div>
</body>

</html>
#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

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

.wrap {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 20px 30px;
  width: 340px;
  background: #f7f7f7;
}
#dialog .e-float-input { /* csslint allow: adjoining-classes */
  margin: 17px 0;
}

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

#content {
    margin-top: 12px;
}

.button-contain {
    padding: 20px 0 0;
    width: 100%;
}

.button-contain .e-btn { /* csslint allow: adjoining-classes */
    width: 100%;
    height: 36px;
}

#heading {
    color: #333;
    font-weight: bold;
    margin: 0 0 15px;
    text-align: center;
    font-size: 20px;
}

.login-form {
    width: 340px;
    margin: 50px auto;
}

#dialog.e-dialog .e-footer-content {
    text-align: center;
}