The Dialog control displays a Dialog window within a web page. The Dialog enables a message to be displayed, such as supplementary content like images and text, and an interactive content like forms.

Example {:.example}

Requires {:.require}

• module:jQuery
• module:ej.core.js
• module:ej.dialog.js
• module:ej.scroller.js
• module:ej.button.js
• module:ej.draggable.js

{:#members:actionbuttons}

Adds action buttons like close, minimize, pin, maximize in the dialog header.

Default Value: {:.param} [“close”]

Example {:.example}

{:#members:ajaxsettings}

Specifies the ajaxSettings option to load the content to the Dialog control.

• null

{% highlight html %}

      <ej-dialog id="basicDialog" title="Facebook" [ajaxSettings]="ajaxSettings" containment="#parent">
        </ej-dialog>

{% endhighlight %}

{% highlight ts %}

  // Set the ajaxSettings options during initialization.  
      ajaxSettings:Object;     
        constructor() {
          this.ajaxSettings={ 
          type:'GET', cache: false, data: {}, dataType: "html", contentType: "html", async: true }
              }

{% endhighlight %}

{:#members:ajaxsettings-async}

It specifies, whether to enable or disable asynchronous request.

{:#members:ajaxsettings-cache}

It specifies the page will be cached in the web browser.

{:#members:ajaxsettings-contenttype}

It specifies the type of data is send in the query string.

{:#members:ajaxsettings-data}

It specifies the data as an object, will be passed in the query string.

{:#members:ajaxsettings-datatype}

It specifies the type of data that you're expecting back from the response.

{:#members:ajaxsettings-type}

It specifies the HTTP request type.

{:#members:allowdraggable}

Enables or disables draggable.

Default Value: {:.param} true

Example {:.example}

{:#members:allowkeyboardnavigation}

Enables or disables keyboard interaction.

Default Value: {:.param} true

Example {:.example}

{:#members:animation}

Customizes the Dialog widget animations. The Dialog widget can be animated while opening and closing the dialog. In order to customize animation effects, you need to set “enableAnimation” as true. It contains the following sub properties.

Example {:.example}

{:#members:backgroundscroll}

To Enable or disable the scrolling for background element of the modal dialog. This will work only with modal dialog.

Default Value: {:.param} true

Example {:.example}

{:#members:closeonescape}

Closes the dialog widget on pressing the ESC key when it is set to true.

Default Value: {:.param} true

Example {:.example}

{:#members:containment}

The selector for the container element. If the property is set, then dialog will append to the selected element and it is restricted to move only within the specified container element.

N> This property is similar to the “target” property but this additionally sets the drag area for dialog. Also this property overrides target property if both are set.

Default Value: {:.param} “”

Example {:.example}

{:#members:contenttype}

The content type to load the dialog content at run time. The possible values are null, AJAX, iframe and image. When it is null (default value), the content inside dialog element will be displayed as content and when it is not null, the content will be loaded from the URL specified in the contentUrl property.

Default Value: {:.param}

null

Examples {:.example}

{:#members:contenturl}

The URL to load the dialog content (such as AJAX, image, and iframe). In order to load content from URL, you need to set contentType as ‘ajax’ or ‘iframe’ or ‘image’.

Default Value: {:.param} null

Example {:.example}

{:#members:cssclass}

The root class for the Dialog widget to customize the existing theme.

Default Value: {:.param} ””

Example {:.example}

{:#members:enableanimation}

Enable or disables animation when the dialog is opened or closed.

Default Value: {:.param} true

Example {:.example}

{:#members:enabled}

Enables or disables the Dialog widget.

Default Value: {:.param} true

Example {:.example}

{:#members:enablemodal}

Enable or disables modal dialog. The modal dialog acts like a child window that is displayed on top of the main window/screen and disables the main window interaction until it is closed.

Default Value: {:.param} false

Example {:.example}

{:#members:enablepersistence}

Allows the current model values to be saved in local storage or browser cookies for state maintenance when it is set to true.

N>Local storage is supported only in Html5 supported browsers.If the browsers don’t have support for local storage,browser cookies will be used to maintain the state.

Default Value: {:.param} false

Example {:.example}

{:#members:enableresize}

Allows the dialog to be resized. The dialog cannot be resized less than the minimum height, width values and greater than the maximum height and width.

Default Value: {:.param} true

Example {:.example}

{:#members:enablertl}

Displays dialog content from right to left when set to true.

Default Value: {:.param} false

Example {:.example}

{:#members:faviconcss}

The CSS class name to display the favicon in the dialog header. In order to display favicon, you need to set showHeader as true since the favicon will be displayed in the dialog header.

Default Value: {:.param} null

Example {:.example}

{:#members:height}

Sets the height for the dialog widget. It accepts both string and integer values. For example, it can accepts values like “auto”, “100%”, “100px” as string type and “100”, “500” as integer type.

Default Value: {:.param} auto

Example {:.example}

{:#members:htmlattributes}

Specifies the HTML Attributes of the Dialog.

• {}

{% highlight html %}

    <ej-dialog id="basicDialog"  [htmlAttributes]="htmlAttributes" > </ej-dialog>

{% endhighlight %}

{% highlight ts %}

        htmlAttributes:object;
        constructor() {
        this.htmlAttributes={class:"my-class", style:"border:1px solid red"}           }

{% endhighlight %}

{:#members:isresponsive}

Enable or disables responsive behavior.

N>Once the dialog is resized or dragged,then the responsive behavior won’t work.

Default Value: {:.param} false

Example {:.example}

{:#members:locale} Set the localization culture for Dialog Widget.

Default Value: {:.param} “en-US”

Example {:.example}

{:#members:maxheight}

Sets the maximum height for the dialog widget.

Default Value: {:.param} null

Example {:.example}

{:#members:maxwidth}

Sets the maximum width for the dialog widget.

Default Value: {:.param} null

Example {:.example}

{:#members:minheight}

Sets the minimum height for the dialog widget.

Default Value: {:.param} 120

Example {:.example}

{:#members:minwidth}

Sets the minimum width for the dialog widget.

Default Value: {:.param} 200

Example {:.example}

{:#members:position}

Displays the Dialog widget at the given X and Y position.

Example {:.example}

{:#members:showheader}

Shows or hides the dialog header.

Default Value: {:.param} true

Example {:.example}

{:#members:showoninit}

The Dialog widget can be opened by default i.e. on initialization, when it is set to true.

Default Value: {:.param} true

Example {:.example}

{:#members:showroundedcorner}

Enables or disables the rounder corner.

Default Value: {:.param} false

Example {:.example}

{:#members:target}

The selector for the container element. If this property is set, the dialog will be displayed (positioned) based on its container.

Default Value: {:.param} null

Example {:.example}

{:#members:title}

The title text to be displayed in the dialog header. In order to set title, you need to set showHeader as true since the title will be displayed in the dialog header.

Default Value: {:.param} ””

Example {:.example}

{:#members:tooltip}

Add or configure the tooltip text for actionButtons in the dialog header.

Example {:.example}

{:#members:width}

Sets the height for the dialog widget. It accepts both string and integer values. For example, it can accepts values like “auto”, “100%”, “100px” as string type and “100”, “500” as integer type.

Default Value: {:.param} ””

Example {:.example}

{:#members:zindex}

Sets the z-index value for the Dialog widget.

Default Value: {:.param} 1000

Example {:.example}

{:#members:showfooter}

Sets the Footer for the Dialog widget.

Default Value: {:.param} false

Example {:.example}

{:#members:footertemplateid}

Sets the FooterTemplate for the Dialog widget.

Default Value: {:.param} null

Example {:.example}

{:#methods:close}

Closes the dialog widget dynamically.

Example {:.example}

{:#methods:collapse}

Collapses the content area when it is expanded.

Example {:.example}

{:#methods:destroy}

Destroys the Dialog widget.

Example {:.example}

{:#methods:expand}

Expands the content area when it is collapsed.

Example {:.example}

{:#methods:isopen}

Checks whether the Dialog widget is opened or not. This methods returns Boolean value.

Example {:.example}

{:#methods:maximize}

Maximizes the Dialog widget.

Example {:.example}

{:#methods:minimize}

Minimizes the Dialog widget.

Example {:.example}

{:#methods:open}

Opens the Dialog widget.

Example {:.example}

{:#methods:pin}

Pins the dialog in its current position.

Example {:.example}

{:#methods:refresh}

Refreshes the dialog content dynamically.

Example {:.example}

{:#methods:restore}

Restores the dialog.

Example {:.example}

{:#methods:unpin}

Unpins the Dialog widget.

Example {:.example}

{:#methods:settitle}

Sets the title for the Dialog widget.

Example {:.example}

{:#methods:setcontent}

Sets the content for the Dialog widget dynamically.

Example {:.example}

{:#methods:focus}

Sets the focus on the Dialog widget.

Example {:.example}

{:#events:beforeopen}

This event is triggered before the dialog widgets gets open.

Example {:.example}

{:#events:ajaxerror}

This event is triggered whenever the AJAX request fails to retrieve the dialog content.

Example {:.example}

{:#events:ajaxsuccess}

This event is triggered whenever the AJAX request to retrieve the dialog content, gets succeed.

Example {:.example}

{:#events:beforeclose}

This event is triggered before the dialog widgets get closed.

Example {:.example}

{:#events:close}

This event is triggered after the dialog widget is closed.

Example {:.example}

{:#events:contentload}

Triggered after the dialog content is loaded in DOM.

N> This event is triggered only when the contentType is set to image or iframe.

Example {:.example}

{:#events:create}

Triggered after the dialog is created successfully

Example {:.example}

{:#events:destroy}

Triggered after the dialog widget is destroyed successfully

Example {:.example}

{:#events:drag}

Triggered while the dialog is dragged.

Example {:.example}

{:#events:dragstart}

Triggered when the user starts dragging the dialog.

Example {:.example}

{:#events:dragstop}

Triggered when the user stops dragging the dialog.

{:#events:open}

Triggered after the dialog is opened.

Example {:.example}

{:#events:resize}

Triggered while the dialog is resized.

Example {:.example}

{:#events:resizestart}

Triggered when the user starts resizing the dialog.

Example {:.example}

{:#events:resizestop}

Triggered when the user stops resizing the dialog.

Example {:.example}

{:#events:expand}

Triggered when the dialog content is expanded.

Example {:.example}

{:#events:collapse}

Triggered when the dialog content is collapsed.

Example {:.example}

{:#events:actionbuttonclick}

Triggered when the custom action button clicked.

Example {:.example}