Getting Started

2 Nov 20164 minutes to read

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

Create a simple Dialog

Refer the common React’s Getting Started Documentation to create an application and add necessary scripts and styles for rendering our React JS components.

Create a JSX file for rendering Dialog component using <EJ.Dialog> syntax. Add required properties to it in <EJ.Dialog> tag element

JAVASCRIPT

ReactDOM.render(   
        <EJ.Dialog id="basicDialog">
        </EJ.Dialog>,
        document.getElementById('Dialog-default')  
    );

Define an HTML element for adding Dialog in the application and refer the JSX file created with script type “text/babel”.

HTML

<div id="Dialog-default"></div>
    <script type="text/babel" src="sample.jsx">

This will render an empty Dialog component on executing.

Add content to Dialog

Add the below code to render Dialog Component with content

JAVASCRIPT

ReactDOM.render(   
        <EJ.Dialog id="basicDialog">
        <p>This is a simple dialog</p>
        </EJ.Dialog>,
        document.getElementById('Dialog-default')  
    );

Any content can be added inside of <EJ.Dialog> </EJ.Dialog> which will be available in Dialog content area on rendering.

Set header text

You can set Dialog component header using the title property.

JAVASCRIPT

ReactDOM.render(   
        <EJ.Dialog id="basicDialog" title="Dialog">
        <p>This is a simple dialog</p>
        </EJ.Dialog>,
        document.getElementById('Dialog-default')  
    );

Run the above code and your output will be,

Open Dialog dynamically

In most cases, the Dialog components are needed only in dynamic actions like showing some messages on clicking a button, to provide alert, etc. So the Dialog component provides “open” and “close” methods to open/close the dialogs dynamically.

The Dialog Component can be hidden on initialize using showOnInit property which should be set to false.

Define click action for the button and the dialog will be opened on clicking the Button component.

JAVASCRIPT

var DefaultDialog = React.createClass({
        onOpen: function (e) {
            $("#basicDialog").ejDialog("open");
        },
        onDialogClose: function (e) {
            $("#btnOpen").show();
        },
        render: function () {
            return (   
            <div id="dialog_default">  
                <EJ.Button id="btnOpen" size="medium" type="button" height={30} width={150} text="Open Dialog" click={this.onOpen}>
                </EJ.Button> 
                <EJ.Dialog id="basicDialog" title="Dialog" showOnInit={false} allowDraggable={true} target="#Dialog-default" close={this.onDialogClose}>
                    <p>This is a simple dialog</p>
                </EJ.Dialog>
            </div>
            );
        }
    });  
    ReactDOM.render(<DefaultDialog />, document.getElementById('Dialog-default'));

Your output will be,

Note: You can find the Dialog properties from the API reference document.