JavaScript (ES5)

Search results

Dialog

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.

Dialog

Properties

allowDragging boolean

animationSettings AnimationSettingsModel

buttons ButtonPropsModel[]

closeOnEscape boolean

content string | HTMLElement | Function

cssClass string

enableHtmlSanitizer boolean

enablePersistence boolean

enableResize boolean

enableRtl boolean

footerTemplate HTMLElement | string | Function

header string | HTMLElement | Function

height string | number

isModal boolean

locale string

minHeight string | number

position PositionDataModel

resizeHandles ResizeDirections[]

showCloseIcon boolean

target HTMLElement | string

visible boolean

width string | number

zIndex number

Methods

addEventListener

appendTo

attachUnloadEvent

dataBind

destroy

detachUnloadEvent

getButtons

getDimension

getLocalData

getRootElement

handleUnload

hide

refresh

refreshPosition

removeEventListener

show

Inject

Events

beforeClose EmitType<BeforeCloseEventArgs>

beforeOpen EmitType<BeforeOpenEventArgs>

beforeSanitizeHtml EmitType<BeforeSanitizeHtmlArgs>

close EmitType<Object>

created EmitType<Object>

destroyed EmitType<Event>

drag EmitType<Object>

dragStart EmitType<Object>

dragStop EmitType<Object>

open EmitType<Object>

overlayClick EmitType<Object>

resizeStart EmitType<Object>

resizeStop EmitType<Object>

resizing EmitType<Object>

allowDragging
`boolean`

animationSettings
`AnimationSettingsModel`

buttons
`ButtonPropsModel[]`

closeOnEscape
`boolean`

content
`string` | `HTMLElement` | `Function`

cssClass
`string`

enableHtmlSanitizer
`boolean`

enablePersistence
`boolean`

enableResize
`boolean`

enableRtl
`boolean`

footerTemplate
`HTMLElement` | `string` | `Function`

header
`string` | `HTMLElement` | `Function`

height
`string` | `number`

isModal
`boolean`

locale
`string`

minHeight
`string` | `number`

position
`PositionDataModel`

resizeHandles
`ResizeDirections[]`

showCloseIcon
`boolean`

target
`HTMLElement` | `string`

visible
`boolean`

width
`string` | `number`

zIndex
`number`

beforeClose
`EmitType<BeforeCloseEventArgs>`

beforeOpen
`EmitType<BeforeOpenEventArgs>`

beforeSanitizeHtml
`EmitType<BeforeSanitizeHtmlArgs>`

close
`EmitType<Object>`

created
`EmitType<Object>`

destroyed
`EmitType<Event>`

drag
`EmitType<Object>`

dragStart
`EmitType<Object>`

dragStop
`EmitType<Object>`

open
`EmitType<Object>`

overlayClick
`EmitType<Object>`

resizeStart
`EmitType<Object>`

resizeStop
`EmitType<Object>`

resizing
`EmitType<Object>`