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> ## Header
Behavior 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
})
</table> ## Footer
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
})
</table> ## Content
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
## Animation </tr> </table> ## Draggable and resizing
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
## 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 </table>
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() {}
})