Getting Started

24 Nov 20164 minutes to read

This section helps you to understand the getting started of the Dialog control with the step-by-step instructions.

Create a Dialog

24 Nov 20164 minutes to read

The following steps guide you to add a Dialog control.

1) Refer the common Typescript Getting Started Documentation to create an application and add necessary scripts and styles for rendering the Dialog control.

2) Create an HTML page and add the scripts and css references in the order mentioned in the following code example.

  • HTML
    • <!DOCTYPE html>
<html>
<head>
    <title>Typescript Application</title>
    <link href="http://cdn.syncfusion.com/**24.2.3**/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script src="http://cdn.syncfusion.com/**24.2.3**/js/web/ej.web.all.min.js" type="text/javascript"></script>
</head>
<body>
    <!--Add Dialog code here-->
</body>
</html>

    3) Add the following code with in the <body> tag to render the Dialog control.

  • HTML
    • <div id="basicDialog">

      </div>

    Initialize the Dialog control in ts file by using the ej.Dialog method.

  • TS
    • /// <reference path="../tsfiles/jquery.d.ts" />
 /// <reference path="../tsfiles/ej.web.all.d.ts" />\

module DialogComponent {
    $(function () {
        var dialogInstance = new ej.Dialog($("#basicDialog"), {
            
        });
    });
}

    To get the following output from the above-mentioned code.

    Add dialog content

    Add the below code to render dialog control with content.

  • HTML
    • <div id="basicDialog">
            <p>This is a simple dialog</p>
       </div>

    To get the following output from the above-mentioned code

    Set the title

    To set the dialog control title as using the below mentioned code.

  • HTML
    • <div id="basicDialog" title="Dialog">
            <p>This is a simple dialog</p>
       </div>

    To get the following output from the above-mentioned code.

    Open Dialog dynamically

    In most cases, the Dialog controls are needed only in dynamic actions like showing some messages on clicking a button, to provide alert, etc. So, the Dialog control provides “open” and “close” methods to open/close the dialogs dynamically.
    The Dialog control can be hidden on initialize using showOnInit property which should be set to false.
    The dialog will be opened on clicking the Button control. Refer to the below mentioned code.

  • HTML
    • <input class="e-btn" id="btnOpen" value="Click to open dialog" />
    <div class="control">
        <div id="basicDialog" title="Dialog">
            <p>This is a simple dialog</p>

            </div>
        </div>
    </div>
  • TS
    • module DialogComponent {
    $(function () {
        var dialogInstance = new ej.Dialog($("#basicDialog"), {
			target:".control",
            showOnInit: false,
            close:()=>{
			$("#btnOpen").show();}
        });
        var btnInstance = new ej.Button($("#btnOpen"), {
            size: "medium",
            click: ()=>{
			$("#btnOpen").hide();
            $("#basicDialog").ejDialog("open");},
            type: "button",
            
        });
    });
}

    To get the following output from the above-mentioned code.

    NOTE

    You can find the Dialog control properties from the API reference.