Search results

Migration from EJ1

This section API migration process of Dialog component from Essential JS1 to Essential JS2.

Accessibility and Localization

Behavior API in Essential JS 1 API in Essential JS 2
Keyboard Navigation Property: allowKeyboardNavigation

$('#dialog').ejDialog({ allowKeyboardNavigation: true
})
No separate API: for enable/disable keyboard navigation. Its enabled by default.
Localization Property: locale

$('#dialog').ejDialog({
locale: 'es-ES'
})
Property: locale

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 API in Essential JS 1 API in Essential JS 2
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 API in Essential JS 1 API in Essential JS 2
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

Content

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

Animation

Behavior 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
}
})

Draggable and resizing

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

Target

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

Position

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

Visibility

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

Dialog Mode

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

Tooltip

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.

Control State

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

State Maintenance

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

Common

Behavior API in Essential JS 1 API in Essential JS 2
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() {}
})