ejDialog

21 Mar 201922 minutes to read

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.

Syntax

JAVASCRIPT

$(element).ejDialog(options)

Name	Type	Description
options	Object	Settings for Dialog.

Example

JAVASCRIPT

// Create the Dialog widget

    $("#dialog").ejDialog();

Requires

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

Members

actionButtons `string[]`

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

Default Value:

[“close”]

Example

JAVASCRIPT

$("#dialog").ejDialog({actionButtons: ["close","collapsible","pin"]});

ajaxSettings `Object`

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

Default Value

null

Example

HTML

<script>
    // Set the ajaxSettings options during initialization.                  
            $("#basicDialog").ejDialog({  ajaxSettings: { type: 'GET', cache: false, data: {}, dataType: "html", contentType: "html", async: true } });
    </script>

ajaxSettings.async `boolean`

It specifies, whether to enable or disable asynchronous request.

ajaxSettings.cache `boolean`

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

ajaxSettings.contentType `string`

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

ajaxSettings.data `Object`

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

ajaxSettings.dataType `string`

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

ajaxSettings.type `string`

It specifies the HTTP request type.

allowDraggable `boolean`

Enables or disables draggable.

Default Value:

true

Example

JAVASCRIPT

$("#dialog").ejDialog({allowDraggable: false});

allowKeyboardNavigation `boolean`

Enables or disables keyboard interaction.

Default Value:

true

Example

JAVASCRIPT

$("#dialog").ejDialog({allowKeyboardNavigation: true});

animation `Object`

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.

Name	Type	Default	Description
show.effect	string	fade	The animation effect when the dialog is opened. The possible values are fade and slide.
show.duration	integer	400	The duration for the animation effect when the dialog is opened.
hide.effect	string	fade	The animation effect when the dialog is closed. The possible values are fade and slide.
hide.duration	integer	400	The duration for the animation effect when the dialog is closed.

Example

JAVASCRIPT

$("#dialog").ejDialog({
        
        enableAnimation: true,
        
        animation: {
        
        //animation settings while opening the dialog
        
        show: {
        
        effect: "slide",
        
        duration: 500
        
        },
        
        //animation settings while closing the dialog
        
        hide: {
        
        effect: "fade",
        
        duration: 500
        
        }
        
        }
        
        });

backgroundScroll `boolean`

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

Default Value:

true

Example

JAVASCRIPT

$("#dialog").ejDialog({backgroundScroll: false, enableModal: true});

closeOnEscape `boolean`

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

Default Value:

true

Example

JAVASCRIPT

$("#dialog").ejDialog({closeOnEscape: false});

containment `string`

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.

NOTE

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:

null

Example

JAVASCRIPT

$("#dialog").ejDialog({containment: "#dragArea"});

contentType `string`

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:

null

Examples

JAVASCRIPT

$("#dialog").ejDialog({contentType: "ajax" });

contentUrl `string`

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:

null

Example

JAVASCRIPT

$("#dialog").ejDialog({contentType: "ajax",

    contentUrl: "http://js.syncfusion.com/demos/web/dialog/ajaxcontent.html" });

cssClass `string`

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

Default Value:

””

Example

JAVASCRIPT

$("#dialog").ejDialog({ cssClass: "gradient-lime" });

enableAnimation `boolean`

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

Default Value:

true

Example

JAVASCRIPT

$("#dialog").ejDialog({ enableAnimation: false});

enabled `boolean`

Enables or disables the Dialog widget.

Default Value:

true

Example

JAVASCRIPT

$("#dialog").ejDialog({ enabled: true });

enableModal `boolean`

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:

false

Example

JAVASCRIPT

$("#dialog").ejDialog({enableModal: true});

enablePersistence `boolean`

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

NOTE

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:

false

Example

JAVASCRIPT

$("#dialog").ejDialog({enablePersistence: true});

enableResize `boolean`

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:

true

Example

JAVASCRIPT

$("#dialog").ejDialog({enableResize: false});

enableRTL `boolean`

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

Default Value:

false

Example

JAVASCRIPT

$("#dialog").ejDialog({enableRTL: true});

faviconCSS `string`

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:

null

Example

JAVASCRIPT

$("#dialog").ejDialog({faviconCSS : "custom-icon" });

height `string` `number`

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:

auto

Example

JAVASCRIPT

$("#dialog").ejDialog({height: 400 });

htmlAttributes `Object`

Specifies the HTML Attributes of the Dialog.

Default Value

{}

Example

HTML

<script type="text/javascript">         
        // Set the htmlAttributes  during initialization.                     
                $("#basicDialog").ejDialog({width:"300px", htmlAttributes: {class:"my-class", style:"border:1px solid red"} }); 
        </script>

isResponsive `boolean`

Enable or disables responsive behavior.

NOTE

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

Default Value:

false

Example

JAVASCRIPT

$("#dialog").ejDialog({isResponsive: true });

locale `string`

Set the localization culture for Dialog Widget.

Default Value:

“en-US”

Example

JAVASCRIPT

$("#dialog").ejDialog({locale: "es-ES"});

maxHeight `string` `number`

Sets the maximum height for the dialog widget.

Default Value:

null

Example

JAVASCRIPT

$("#dialog").ejDialog({maxHeight: 600 });

maxWidth `string` `number`

Sets the maximum width for the dialog widget.

Default Value:

null

Example

JAVASCRIPT

$("#dialog").ejDialog({maxWidth: 600 });

minHeight `string` `number`

Sets the minimum height for the dialog widget.

Default Value:

120

Example

JAVASCRIPT

$("#dialog").ejDialog({minHeight: 400 });

minWidth `string` `number`

Sets the minimum width for the dialog widget.

Default Value:

200

Example

JAVASCRIPT

$("#dialog").ejDialog({minWidth: 400 });

position `Object`

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

Name	Type	Default	Description
X	string	null	Sets the left position of the Dialog widget.
Y	string	null	Sets the top position of the Dialog widget.

Example

JAVASCRIPT

$("#dialog").ejDialog({position: { X: 300, Y: 10 }});

showHeader `boolean`

Shows or hides the dialog header.

Default Value:

true

Example

JAVASCRIPT

$("#dialog").ejDialog({showHeader: false});

showOnInit `boolean`

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

Default Value:

true

Example

JAVASCRIPT

$("#dialog").ejDialog({showOnInit:true});

showRoundedCorner `boolean`

Enables or disables the rounder corner.

Default Value:

false

Example

JAVASCRIPT

$("#dialog").ejDialog({showRoundedCorner: true});

target `string`

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

Default Value:

null

Example

JAVASCRIPT

$("#dialog").ejDialog({target: "#sampleArea" });

title `string`

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:

””

Example

JAVASCRIPT

$("#dialog").ejDialog({title: "Custom title" });

tooltip `Object`

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

Name	Type	Default	Description
close	string	“Close”	Sets the tooltip for close button.
collapse	string	“Collapse”	Sets the tooltip for collapse button.
restore	string	“Restore”	Sets the tooltip for restore button.
maximize	string	“Maximize”	Sets the tooltip for maximize button.
minimize	string	“Minimize”	Sets the tooltip for minimize button.
expand	string	“Expand”	Sets the tooltip for expand button.
unpin	string	“Unpin”	Sets the tooltip for unpin button.
pin	string	“Pin”	Sets the tooltip for pin button.

Example

JAVASCRIPT

$("#dialog").ejDialog({tooltip: { close: "Exit" }});

width `string` `number`

Default Value:

Example

JAVASCRIPT

$("#dialog").ejDialog({width: 500 });

zIndex `number`

Sets the z-index value for the Dialog widget.

Default Value:

10000

Example

JAVASCRIPT

$("#dialog").ejDialog({zIndex: 11000 });

Note

The z-index values below 10000 can be set through model in the dialog created event.

showFooter `boolean`

Sets the Footer for the Dialog widget.

Default Value:

false

Example

JAVASCRIPT

$("#dialog").ejDialog({showFooter: true });

footerTemplateId `string`

Sets the FooterTemplate for the Dialog widget.

Default Value:

null

Example

HTML

<div id="dialog"> Sample content </div>

    <script id="sample" type="text/x-jsrender">
      <!-- Template content here -->
    </script>

JAVASCRIPT

$("#dialog").ejDialog({showFooter: true,footerTemplateId:"sample"});

Methods

close()

Closes the dialog widget dynamically.

Returns: object

Example

JAVASCRIPT

$("#dialog").ejDialog("close");

collapse()

Collapses the content area when it is expanded.

Returns: object

Example

JAVASCRIPT

$("#dialog").ejDialog("collapse");

destroy()

Destroys the Dialog widget.

Example

JAVASCRIPT

$("#dialog").ejDialog("destroy");

expand()

Expands the content area when it is collapsed.

Returns: object

Example

JAVASCRIPT

$("#dialog").ejDialog("collapse");

isOpen()

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

Returns: boolean

Example

JAVASCRIPT

var isOpen = $("#dialog").ejDialog("isOpen");

maximize()

Maximizes the Dialog widget.

Returns: object

Example

JAVASCRIPT

$("#dialog").ejDialog("maximize");

minimize()

Minimizes the Dialog widget.

Returns: object

Example

JAVASCRIPT

$("#dialog").ejDialog("minimize");

open()

Opens the Dialog widget.

Returns: object

Example

JAVASCRIPT

$("#dialog").ejDialog("open");

pin()

Pins the dialog in its current position.

Returns: object

Example

JAVASCRIPT

$("#dialog").ejDialog("pin");

refresh()

Refreshes the dialog content dynamically.

Returns: void

Example

JAVASCRIPT

$("#dialog").ejDialog("refresh");

restore()

Restores the dialog.

Returns: object

Example

JAVASCRIPT

$("#dialog").ejDialog("maximize");

unpin()

Unpins the Dialog widget.

Returns: object

Example

JAVASCRIPT

$("#dialog").ejDialog("unpin");

setTitle(title)

Sets the title for the Dialog widget.

Parameters	Type	Description
Title	string	The title for the dialog widget.

Returns: object

Example

JAVASCRIPT

$("#dialog").ejDialog("setTitle","The Dialog");

setContent(content)

Sets the content for the Dialog widget dynamically.

Parameters	Type	Description
content	string	The content for the dialog widget. It accepts both string and HTML string.

Returns: object

Example

JAVASCRIPT

$("#dialog").ejDialog("setContent","custom content");

focus()

Sets the focus on the Dialog widget.

Returns: object

Example

JAVASCRIPT

$("#dialog").ejDialog("focus");

Events

actionButtonClick

Triggered when the custom action button clicked.

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
buttonID	string	Name of the event target attribute.
type	string	Name of the event.
model	Object	Instance of the dialog model object.
currentTarget	string	Name of the event current target title.
event	string	Name of the event.

Example

JAVASCRIPT

$("#dialog").ejDialog({ 

	actionButtonClick: function (args) {
        
    } 

});

ajaxError

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

</td>

Name

Type

Description

cancel

boolean

Set this option to true to cancel the event.

model

Object

Instance of the dialog model object.

type

string

Name of the event.

URL

string

URL of the content.

data

Object

Name	Type	Description
responseText	string	Error page content.
status	number	Error code.
statusText	string	The corresponding error description.

Example

JAVASCRIPT

$("#dialog").ejDialog({ ajaxError: function (args){} });

ajaxSuccess

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

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the dialog model object.
type	string	Name of the event.
URL	string	URL of the content.
data	string	Response content.

Example

JAVASCRIPT

$("#dialog").ejDialog({ ajaxSuccess: function (args){}});

beforeOpen

This event is triggered before the dialog widgets gets open.

Event arguments	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the dialog model object.
type	string	Name of the event

Example

JAVASCRIPT

$("#dialog").ejDialog({ beforeOpen: function (args) {} });

beforeClose

This event is triggered before the dialog widgets get closed.

Name	Type	Description
event	Object	Current event object.
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the dialog model object.
type	string	Name of the event.
isInteraction	boolean	returns true when the dialog activated by user interaction otherwise returns false

Example

JAVASCRIPT

$("#dialog").ejDialog({ beforeClose: function(args){}});

close

This event is triggered after the dialog widget is closed.

Name	Type	Description
event	Object	Current event object.
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the dialog model object.
type	string	Name of the event
isInteraction	boolean	returns true when the Dialog activated by user interaction otherwise returns false

Example

JAVASCRIPT

$("#dialog").ejDialog({ close: function (args) {} });

collapse

Triggered when the dialog content is collapsed.

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the dialog model object.
type	string	Name of the event.
isInteraction	boolean	returns true when the Dialog activated by user interaction otherwise returns false

Example

JAVASCRIPT

$("#dialog").ejDialog({ 

	actionButtons: ["close","collapse","expand"], 

	collapse: function (args) {} 

});

contentLoad

Triggered after the dialog content is loaded in DOM.

NOTE

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

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the dialog model object.
type	string	Name of the event.
URL	string	URL of the content.
contentType	Object	Content type

Example

JAVASCRIPT

$("#dialog").ejDialog({ contentLoad: function (args) {} });

create

Triggered after the dialog is created successfully

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the dialog model object.
type	string	Name of the event.

Example

JAVASCRIPT

$("#dialog").ejDialog({ create: function (args) {} });

destroy

Triggered after the dialog widget is destroyed successfully

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the dialog model object.
type	string	Name of the event.

Example

JAVASCRIPT

$("#dialog").ejDialog({ destroy: function (args) {} });

drag

Triggered while the dialog is dragged.

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the dialog model object.
type	string	Name of the event.
event	Object	Current event object.

Example

JAVASCRIPT

$("#dialog").ejDialog({ drag: function (args) {} });

dragStart

Triggered when the user starts dragging the dialog.

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the dialog model object.
type	string	Name of the event.
event	Object	Current event object.

Example

JAVASCRIPT

$("#dialog").ejDialog({ dragStart: function (args) {} });

dragStop

Triggered when the user stops dragging the dialog.

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the dialog model object.
type	string	Name of the event.
event	Object	Current event object.

Example

JAVASCRIPT

$("#dialog").ejDialog({ dragStop: function (args) {} });

expand

Triggered when the dialog content is expanded.

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the dialog model object.
type	string	Name of the event.
isInteraction	boolean	returns true when the Dialog activated by user interaction otherwise returns false

Example

JAVASCRIPT

$("#dialog").ejDialog({ 
        
            actionButtons: ["close","collapse","expand"], 
        
            expand: function (args) {} 
        
        });

open

Triggered after the dialog is opened.

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the dialog model object.
type	string	Name of the event.

Example

JAVASCRIPT

$("#dialog").ejDialog({ open: function (args) {} });

resize

Triggered while the dialog is resized.

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the dialog model object.
type	string	Name of the event.
event	Object	Current event object.

Example

JAVASCRIPT

$("#dialog").ejDialog({ resize: function (args) {} });

resizeStart

Triggered when the user starts resizing the dialog.

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the dialog model object.
type	string	Name of the event
event	Object	Current event object.

Example

JAVASCRIPT

$("#dialog").ejDialog({ resizeStart: function (args) {} });

resizeStop

Triggered when the user stops resizing the dialog.

Name	Type	Description
cancel	boolean	Set this option to true to cancel the event.
model	Object	Instance of the dialog model object.
type	string	Name of the event
event	Object	Current event object.

Example

JAVASCRIPT

$("#dialog").ejDialog({ resizeStop: function (args) {} });

ejDialog

Syntax

Members

actionButtons string[]

ajaxSettings Object

Default Value

Example

ajaxSettings.async boolean

ajaxSettings.cache boolean

ajaxSettings.contentType string

ajaxSettings.data Object

ajaxSettings.dataType string

ajaxSettings.type string

allowDraggable boolean

allowKeyboardNavigation boolean

animation Object

backgroundScroll boolean

closeOnEscape boolean

containment string

contentType string

contentUrl string

cssClass string

enableAnimation boolean

enabled boolean

enableModal boolean

enablePersistence boolean

enableResize boolean

enableRTL boolean

faviconCSS string

height string number

htmlAttributes Object

Default Value

Example

isResponsive boolean

locale string

maxHeight string number

maxWidth string number

minHeight string number

minWidth string number

position Object

showHeader boolean

showOnInit boolean

showRoundedCorner boolean

target string

title string

tooltip Object

width string number

zIndex number

Note

showFooter boolean

footerTemplateId string

Methods

close()

Returns: object

collapse()

Returns: object

destroy()

expand()

Returns: object

isOpen()

Returns: boolean

maximize()

Returns: object

minimize()

Returns: object

open()

Returns: object

pin()

Returns: object

refresh()

Returns: void

restore()

Returns: object

unpin()

Returns: object

setTitle(title)

Returns: object

setContent(content)

Returns: object

focus()

actionButtons `string[]`

ajaxSettings `Object`

ajaxSettings.async `boolean`

ajaxSettings.cache `boolean`

ajaxSettings.contentType `string`

ajaxSettings.data `Object`

ajaxSettings.dataType `string`

ajaxSettings.type `string`

allowDraggable `boolean`

allowKeyboardNavigation `boolean`

animation `Object`

backgroundScroll `boolean`

closeOnEscape `boolean`

containment `string`

contentType `string`

contentUrl `string`

cssClass `string`

enableAnimation `boolean`

enabled `boolean`

enableModal `boolean`

enablePersistence `boolean`

enableResize `boolean`

enableRTL `boolean`

faviconCSS `string`

height `string` `number`

htmlAttributes `Object`

isResponsive `boolean`

locale `string`

maxHeight `string` `number`

maxWidth `string` `number`

minHeight `string` `number`

minWidth `string` `number`

position `Object`

showHeader `boolean`

showOnInit `boolean`

showRoundedCorner `boolean`

target `string`

title `string`

tooltip `Object`

width `string` `number`

zIndex `number`

showFooter `boolean`

footerTemplateId `string`