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

    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:

    • 400

    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) {} });