Having trouble getting help?
Contact Support
Contact Support
Ej1 api migration in EJ2 JavaScript Dialog control
12 Apr 20256 minutes to read
This section API migration process of Dialog component from Essential® JS JS1 to Essential® JS2.
Accessibility and Localization
</table> ## HeaderBehavior | API in Essential® JS 1 </td> | API in Essential® JS 2 </td> </tr> |
Keyboard Navigation |
Property: allowKeyboardNavigation $('#dialog').ejDialog({ allowKeyboardNavigation: true }) |
No separate API: for enable/disable keyboard navigation. Its enabled by default. |
Localization |
Property: locale </br>
$('#dialog').ejDialog({ locale: 'es-ES' }) |
Property: locale </br>
var dialog = ej.popups.Dialog({ locale: 'es-ES' }) |
Right to left |
Property: enableRTL $('#dialog').ejDialog({ enableRTL: true }) |
Property: enableRTL var dialog = ej.popups.Dialog({ enableRtl: true }) |
Behavior </td> | API in Essential® JS 1 </td> | API in Essential® JS 2 </td> </tr> |
Header Content |
Property: title $('#dialog').ejDialog({ title: 'EJ1 Dialog header' }) Method: setTitle $('#dialog').ejDialog('setTitle', 'EJ1 Dialog Header') |
Property: header var dialog = ej.popups.Dialog({ header: 'EJ2 Dialog' }) |
close button |
Property: actionButtons $('#dialog').ejDialog({ actionButtons: ["close"] }) |
Property: showCloseIcon var dialog = ej.popups.Dialog({ showCloseIcon: true }) |
Event triggers when click on action buttons |
Event: actionButtonClick $('#dialog').ejDialog({ actionButtonClick: function () {} }) |
Not Applicable |
Minimize |
Property: actionButtons $('#dialog').ejDialog({ actionButtons: ["minimize"] }) |
Not Applicable |
Maximize |
Property: actionButtons $('#dialog').ejDialog({ actionButtons: ["maximize"] }) |
Not Applicable |
Collapse /Expand |
Property: actionButtons Method: collapse(), expand () $('#dialog').ejDialog({ actionButtons: ["collapsible"] }) $('#dialog').ejDialog('collapse') $('#dialog').ejDialog('expand') |
Not Applicable |
Event triggers when expanding the collapsed dialog |
Event: expand $('#dialog').ejDialog({ expand: function () {} }) |
Not Applicable |
Event triggers when collapsing the expanded dialog |
Event: collapse $('#dialog').ejDialog({ collapse: function () {} }) |
Not Applicable |
Pin |
Property: actionButtons $('#dialog').ejDialog({ actionButtons: ["pin"] }) |
Not Applicable |
Header visibility |
Property: showHeader $('#dialog').ejDialog({ showHeader: true }) |
Not Applicable |
Close on escape key press |
Property: closeOnEscape $('#dialog').ejDialog({ closeOnEscape: true }) |
Property: closeOnEscape var dialog = ej.popups.Dialog({ closeOnEscape: true }) |
Behavior </td> | API in Essential® JS 1 </td> | API in Essential® JS 2 </td> </tr> |
Footer Content |
Property: footerTemplateId $('#dialog').ejDialog({ footerTemplateId: 'sample' }) |
Property: footerTemplate var dialog = ej.popups.Dialog({ footerTemplate: '<button>Submit</button>' }) |
Footer action buttons | Not applicable |
Property: buttons var dialog = ej.popups.Dialog({ buttons: [{ click: dialogBtnClick, buttonModel: { content: 'OK', isPrimary: true } }] }) |
Footer visibility |
Property: showFooter $('#dialog').ejDialog({ showFooter: true }) |
Not Applicable |
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
Dialog content |
Method: setContent $('#dialog').ejDialog('setContent', 'Dialog Content') |
Property: content var dialog = ej.popups.Dialog({ content: 'Dialog content' }) |
Loading content using AJAX request |
Property: contentType, contentUrl $('#dialog').ejDialog({ contentType: "ajax", contentUrl: ' ' }) |
Not Applicable |
Event triggers after the dialog content loaded in DOM |
Event: contentLoad $('#dialog').ejDialog({ contentLoad: function () {} }) |
Not Applicable |
Event trigger when fails to load ajax content |
Event: ajaxError $('#dialog').ejDialog({ ajaxError: function () {} }) |
Not Applicable |
Event trigger when load ajax content successfully |
Event: ajaxSuccess $('#dialog').ejDialog({ ajaxSuccess: function () {} }) |
Not Applicable |
Behavior </td> | API in Essential® JS 1 | API in Essential® JS 2 |
Enabling Animation |
Property: enableAnimation $('#dialog').ejDialog({ enableAnimation: true }) |
Not Applicable |
Animation effects |
Property: animation.show.effect $('#dialog').ejDialog({ Animation: { show: { effect: 'slide' } } }) |
Property: animationSettings.effect var dialog = ej.popups.Dialog({ animationSettings: { effect: 'Zoom' } }) |
Animation duration |
Property: animation.show.duration $('#dialog').ejDialog({ Animation: { show: { effect: 'slide', duration: 500 } } }) |
Property:animationSettings.duration var dialog = ej.popups.Dialog({ animationSettings: { effect: 'Zoom', duration: 500 } }) |
Animation delay | Not applicable |
Property:animationSettings.delay var dialog = ej.popups.Dialog({ animationSettings: { effect: 'Zoom', duration: 500, delay: 300 } }) |
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
Draggable dialog |
Property: allowDraggable $('#dialog').ejDialog({ allowDraggable: true }) |
Property: allowDragging var dialog = ej.popups.Dialog({ allowDragging: true }) |
Event triggers when the user drags the dialog |
Event: drag $('#dialog').ejDialog({ drag: function () {} }) |
Event: drag var dialog = ej.popups.Dialog({ drag: function() {} }) dialog.appendTo('#ej2Dialog') |
Event triggers when the start to drag the dialog |
Event: dragStart $('#dialog').ejDialog({ dragStart: function () {} }) |
Event: dragStart var dialog = ej.popups.Dialog({ dragStart: function() {} }) dialog.appendTo('#ej2Dialog') |
Event triggers when the stops to drag the dialog |
Event: dragStop $('#dialog').ejDialog({ dragStop: function () {} }) |
Event: dragStop var dialog = ej.popups.Dialog({ dragStop: function() {} }) dialog.appendTo('#ej2Dialog') |
Resizing dialog |
Property: enableResize $('#dialog').ejDialog({ enableResize: true }) |
Not applicable |
Event triggers when resizing the dialog |
Event: resize $('#dialog').ejDialog({ resize: function () {} }) |
Not Applicable |
Event triggers when starts to resizing the dialog |
Event: resizeStart $('#dialog').ejDialog({ resizeStart: function () {} }) |
Not Applicable |
Event triggers when the stops to resizing the dialog |
Event: resizeStop $('#dialog').ejDialog({ resizeStop: function () {} }) |
Not Applicable |
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
Target element to append dialog in document |
Property: target $('#dialog').ejDialog({ target: '#dialogTarget' }) |
Property: target var dialog = ej.popups.Dialog({ target: '#dialogTarget' }) |
Element for draggable area |
Property: containment $('#dialog').ejDialog({ containment: '#dragArea' }) |
Not applicable |
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
Customizing dialog position using X, Y coordinate values |
Property: position $('#dialog').ejDialog({ position: { X: 300, Y: 100 } }) |
Property: position var dialog = ej.popups.Dialog({ position: { X: 300, Y: 100} }) |
positioning dialog using position values | Not Applicable |
Property: position var dialog = ej.popups.Dialog({ position: { X: 'Center', Y: 'Center'} }) |
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
Render dialog in visible/hidden state |
Property: showOnInit $('#dialog').ejDialog({ showOnInit: true }) |
Property: visible var dialog = ej.popups.Dialog({ visible: true }) |
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
Render modal dialog |
Property: enableModal $('#dialog').ejDialog({ enableModal: true }) |
Property: isModal var dialog = ej.popups.Dialog({ isModal: true }) |
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
Sets the tooltip for dialog buttons |
Property: tooltip $('#dialog').ejDialog({ tooltip: { close: 'Exit' } }) |
No Separate API for tooltip. It renders based on locale text. |
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
Enable/Disable the control |
Property: enabled $('#dialog').ejDialog({ enabled: false }) |
Not Applicable |
Enable/ Disable page scrolling |
Property: backgroundScroll $('#dialog').ejDialog({ backgroundScroll: false }) |
No separate API for disabling page scroll. By default, scrolling prevented for modal dialog |
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
Save the model values in local storage or cookies |
Property: enablePersistence $('dialog').ejDialog({ enablePersistence: true }) |
Property: enablePersistence var dialog = ej.popups.Dialog({ enablePersistence: true }) |
Behavior </td> | API in Essential® JS 1 </td> | API in Essential® JS 2 </td> </tr> |
Adjusting Height |
Property: height $('#dialog').ejDialog({ height: 400 }) |
Property: height var dialog = ej.popups.Dialog({ height: '50%' }) |
Adjusting width |
Property: width
$('#dialog').ejDialog({ width: 400 }) |
Property: width var dialog = ej.popups.Dialog({ width: '50%' }) |
Adding custom class |
Property: cssClass $('#dialog').ejDialog({ cssClass: 'custom-class' }) |
Property: cssClass var dialog = ej.popups.Dialog({ cssClass: 'custom-class' }) |
Adding zIndex |
Property: zIndex $('#dialog').ejDialog({ zIndex: 2000 }) |
Property: zIndex var dialog = ej.popups.Dialog({ zIndex: 2000 }) |
Maximum height |
Property: maxHeight $('#dialog').ejDialog({ maxHeight: 600 }) |
Not Applicable |
Maximum width |
Property: maxWidth $('#dialog').ejDialog({ maxWidth: 600 }) |
Not Applicable |
Minimum height |
Property: minHeight $('#dialog').ejDialog({ minHeight: 300 }) |
Not Applicable |
Minimum width |
Property: minWidth $('#dialog').ejDialog({ minWidth: 300 }) |
Not Applicable |
Adding html attributes |
Property: htmlAttributes $('#dialog').ejDialog({ htmlAttributes: { class: 'my-class' } }) |
Not Applicable |
Custom icon in the header |
Property: faviconCSS $('#dialog').ejDialog({ faviconCSS: 'custom-icon' }) |
Not Applicable |
Rounded corner appearance |
Property: showRoundedCorner $('#dialog').ejDialog({ showRoundedCorner: true }) |
Not Applicable |
Make control flexible for mobile view |
Property: isResponsive $('#dialog').ejDialog({ isResponsive: true }) |
Not Applicable |
Close the Dialog |
Method: close() $('#dialog').ejDialog('close') |
Method: hide() var dialog = ej.popups.Dialog() dialog.appendTo(''#ej2Dialog'') dialog.hide() |
Event triggers before the dialog closes |
Event: beforeClose() $('#dialog').ejDialog({ beforeClose: function () {} }) |
Event: beforeClose() var dialog = ej.popups.Dialog({ beforeClose: beforeCloseDialog }) dialog.appendTo('#ej2Dialog') function beforeCloseDialog() {} |
Event triggers when the dialog closes |
Event: close() $('#dialog').ejDialog({ close: function () {} }) |
Event: close() var dialog = ej.popups.Dialog({ close: CloseDialog }) dialog.appendTo('#ej2Dialog') function CloseDialog() {} |
Destroy the control |
Method: destroy() $('#dialog').ejDialog('destroy') |
Method: destroy() var dialog = ej.popups.Dialog() dialog.appendTo(''#ej2Dialog'') dialog.destroy() |
Focus the dialog element |
Method: focus() $('#dialog').ejDialog('focus') |
Not Applicable |
Check whether the dialog is open |
Method: isOpen() $('#dialog').ejDialog('isOpen') |
Not Applicable |
Maximize the dialog |
Method: maximize() $('#dialog').ejDialog('maximize') |
Not Applicable |
Minimize the dialog |
Method: minimize() $('#dialog').ejDialog('minimize') |
Not Applicable |
Open the dialog |
Method: open() $('#dialog').ejDialog('open') |
Method: show() var dialog = ej.popups.Dialog() dialog.appendTo(''#ej2Dialog'') dialog.show() |
Event trigger before the dialog opens |
Event: beforeOpen() $('#dialog').ejDialog({ beforeOpen: function () {} }) |
Event: beforeOpen() var dialog = ej.popups.Dialog({ beforeOpen: beforeOpenDialog }) dialog.appendTo('#ej2Dialog') function beforeOpenDialog() {} |
Event triggers when the opens the dialog |
Event: open() $('#dialog').ejDialog({ open: function () {} }) |
Event: open() var dialog = ej.popups.Dialog({ open: function() {} }) dialog.appendTo('#ej2Dialog') |
Refresh the dialog |
Method: refresh() $('#dialog').ejDialog('refresh') |
Method: refreshPosition() var dialog = ej.popups.Dialog() dialog.appendTo(''#ej2Dialog'') dialog.refreshPosition() |
Pin/ unpin the dialog |
Method: pin $('#dialog').ejDialog('pin') $('#dialog').ejDialog('unpin') |
Not Applicable |
Event triggers after the dialog created successfully |
Event: create() $('#dialog').ejDialog({ create: function () {} }) |
Event: created() var dialog = ej.popups.Dialog created: function() {} }) dialog.appendTo('#ej2Dialog') |
Event triggers when the control destroyed successfully |
Event: destroy $('#dialog').ejDialog({ destroy: function () {} }) |
Not Applicable |
Event triggers on clicking on modal dialog overlay | Not Applicable |
Event: overlayClick() var dialog = ej.popups.Dialog({ overlayClick: function() {} }) |