DialogModel API in JavaScript Dialog API control

Interface for a class Dialog

Properties

beforeClose

EmitType<BeforeCloseEventArgs>

Event triggers before the dialog is closed. If you cancel this event, the dialog remains opened. Set the cancel argument to true to cancel the closure of a dialog.

beforeOpen

EmitType<BeforeOpenEventArgs>

Event triggers when the dialog is being opened. If you cancel this event, the dialog remains closed. Set the cancel argument to true to cancel the open of a dialog.

beforeSanitizeHtml

EmitType<BeforeSanitizeHtmlArgs>

Event triggers before sanitize the value.

close

EmitType<Object>

Event triggers after the dialog has been closed.

created

EmitType<Object>

Event triggers when the dialog is created.

destroyed

EmitType<Event>

Event triggers when the dialog is destroyed.

drag

EmitType<Object>

Event triggers when the user drags the dialog.

dragStart

EmitType<Object>

Event triggers when the user begins dragging the dialog.

dragStop

EmitType<Object>

Event triggers when the user stop dragging the dialog.

open

EmitType<Object>

Event triggers when a dialog is opened.

overlayClick

EmitType<Object>

Event triggers when the overlay of dialog is clicked.

resizeStart

EmitType<Object>

Event triggers when the user begins to resize a dialog.

resizeStop

EmitType<Object>

Event triggers when the user stop to resize a dialog.

resizing

EmitType<Object>

Event triggers when the user resize the dialog.

allowDragging

boolean

Specifies the value whether the dialog component can be dragged by the end-user. The dialog allows to drag by selecting the header and dragging it for re-position the dialog.

More information on the draggable behavior can be found on this documentation section.

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

import { Dialog } from '@syncfusion/ej2-popups';

let dialogObj: Dialog = new Dialog({
    header: 'dialog',
    content : 'Dialog sample',
    allowDragging: true,
    width: '300px'
});
dialogObj.appendTo('#dialog');

animationSettings

AnimationSettingsModel

Specifies the animation settings of the dialog component. The animation effect can be applied on open and close the dialog with duration and delay.

More information on the animation settings in dialog can be found on this documentation section.

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

import { Dialog } from '@syncfusion/ej2-popups';

let dialogObj: Dialog = new Dialog({
    content : 'dialog',
    width: '300px',
    animationSettings: { effect: 'FadeZoom', duration: 400 }
});
dialogObj.appendTo('#dialog');

buttons

ButtonPropsModel[]

Configures the action buttons that contains button properties with primary attributes and click events. One or more action buttons can be configured to the dialog.

More information on the button configuration can be found on this documentation section.

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

import { Dialog } from '@syncfusion/ej2-popups';

let dialogObj: Dialog = new Dialog({
    content : 'dialog',
    width: '300px',
    buttons: [{ buttonModel: { content: 'OK', isPrimary: true } }]
});
dialogObj.appendTo('#dialog');

closeOnEscape

boolean

Specifies the boolean value whether the dialog can be closed with the escape key that is used to control the dialog’s closing behavior.

content

string | HTMLElement

Specifies the value that can be displayed in dialog’s content area. It can be information, list, or other HTML elements. The content of dialog can be loaded with dynamic data such as database, AJAX content, and more.

cssClass

string

Specifies the CSS class name that can be appended with root element of the dialog. One or more custom CSS classes can be added to a dialog.

enableHtmlSanitizer

boolean

Defines whether to allow the cross-scripting site or not.

enablePersistence

boolean

Enables or disables the persistence of the dialog’s dimensions and position state between page reloads.

enableResize

boolean

Specifies the value whether the dialog component can be resized by the end-user. If enableResize is true, the dialog component creates grip to resize it diagonal direction.

enableRtl

boolean

Enable or disable rendering component in right to left direction.

footerTemplate

HTMLElement | string

Specifies the template value that can be displayed with dialog’s footer area. This is optional property and can be used only when the footer is occupied with information or custom components. By default, the footer is configured with action buttons. If footer template is configured to dialog, the action buttons property will be disabled.

More information on the footer template configuration can be found on this documentation section.

header

string | HTMLElement

Specifies the value that can be displayed in the dialog’s title area that can be configured with plain text or HTML elements. This is optional property and the dialog can be displayed without header, if the header property is null.

height

string | number

Specifies the height of the dialog component.

isModal

boolean

Specifies the Boolean value whether the dialog can be displayed as modal or non-modal.

• Modal: It creates overlay that disable interaction with the parent application and user should respond with modal before continuing with other applications.
• Modeless: It does not prevent user interaction with parent application.

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

minHeight

string | number

Specify the min-height of the dialog component.

position

PositionDataModel

Specifies the value where the dialog can be positioned within the document or target. The position can be represented with pre-configured positions or specific X and Y values.

• X value: left, center, right, or offset value.

• Y value: top, center, bottom, or offset value.

  More information on the positioning in dialog can be found on this documentation section.

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

import { Dialog } from '@syncfusion/ej2-popups';

let dialogObj: Dialog = new Dialog({
    content : 'dialog',
    width: '300px',
    position: { X: 'center', Y: 'center' }
});
dialogObj.appendTo('#dialog');

resizeHandles

ResizeDirections[]

Specifies the resize handles direction in the dialog component that can be resized by the end-user.

showCloseIcon

boolean

Specifies the value that represents whether the close icon is shown in the dialog component.

target

HTMLElement | string

Specifies the target element in which to display the dialog. The default value is null, which refers the document.body element.

visible

boolean

Specifies the value that represents whether the dialog component is visible.

width

string | number

Specifies the width of the dialog.

zIndex

number

Specifies the z-order for rendering that determines whether the dialog is displayed in front or behind of another component.