Dialog

23 Sep 202510 minutes to read

Represents the dialog component that displays the information and get input from the user.
Two types of dialog components are Modal and Modeless (non-modal) depending on its interaction with parent application.

<div id="dialog"></div>
<script>
  var dialogObj = new Dialog({ header: 'Dialog' });
  dialogObj.appendTo("#dialog");
</script>

Properties

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');

Defaults to false

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');

Defaults to { effect: ‘Fade’, duration: 400, delay:0 }

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');

Defaults to [{}]

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.

Defaults to true

content string|HTMLElement|Function

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.

Defaults to ’’

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.

Defaults to ’’

enableHtmlSanitizer boolean

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

Defaults to true

enablePersistence boolean

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

Defaults to false

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.

Defaults to false

enableRtl boolean

Enable or disable rendering component in right to left direction.

Defaults to false

footerTemplate HTMLElement|string|Function

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.

Defaults to ’’

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.

Defaults to ’’

height string|number

Specifies the height of the dialog component.

Defaults to ‘auto’

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.

Defaults to false

locale string

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

Defaults to ’’

minHeight string|number

Specify the min-height of the dialog component.

Defaults to ’’

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');

Defaults to { X: ‘center’, Y: ‘center’ }

resizeHandles ResizeDirections[]

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

Defaults to [‘South-East’]

showCloseIcon boolean

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

Defaults to false

target HTMLElement|string

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

Defaults to null

visible boolean

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

Defaults to true

width string|number

Specifies the width of the dialog.

Defaults to ‘100%’

zIndex number

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

Defaults to 1000

Methods

addEventListener

Adds the handler to the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event
handler Function Specifies the call to run when the event occurs.

Returns void

appendTo

Appends the control within the given HTML element

Parameter Type Description
selector (optional) string | HTMLElement Target element where control needs to be appended

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

To destroy the widget

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

getButtons

Returns the dialog button instances.
Based on that, you can dynamically change the button states.

Parameter Type Description
index (optional) number Index of the button.

Returns Button[] | Button

getDimension

Returns the current width and height of the Dialog

Returns DialogDimension

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

hide

Closes the dialog if it is in visible state.

Parameter Type Description
event (optional) Event specifies the event

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

refreshPosition

Refreshes the dialog’s position when the user changes its header and footer height/width dynamically.

Returns void

removeEventListener

Removes the handler from the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event to remove
handler Function Specifies the function to remove

Returns void

show

Opens the dialog if it is in hidden state.
To open the dialog with full screen width, set the parameter to true.

Parameter Type Description
isFullScreen (optional) boolean Enable the fullScreen Dialog.

Returns void

Inject

Dynamically injects the required modules to the component.

Parameter Type Description
moduleList Function[] ?

Returns void

Events

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.