Ej1 api migration in EJ2 TypeScript Dialog control

12 Apr 20256 minutes to read

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

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

let dialog = new Dialog({
header: 'EJ2 Dialog'
})
dialog.appendTo('#ej2_dialog')
close button property: actionButtons

$('#dialog').ejDialog({
actionButtons: ["close"]
}) 		property: showCloseIcon

let dialog = new Dialog({
showCloseIcon: true
})
dialog.appendTo('#ej2_dialog')
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

let dialog = new Dialog({
closeOnEscape: true
})
dialog.appendTo('#ej2_dialog')
Behavior API in Essential® JS 1 API in Essential® JS 2
Footer Content property: footerTemplateId

$('#dialog').ejDialog({
footerTemplateId: 'sample'
}) 		property: footerTemplate

let dialog = new Dialog({
footerTemplate: '<button>Submit</button>'
})
dialog.appendTo('#ej2_dialog')
Footer action buttons Not applicable property: buttons

let dialog = new Dialog({
buttons: [{ click: dialogBtnClick, buttonModel: { content: 'OK', isPrimary: true } }]
})
dialog.appendTo('#ej2_dialog')
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

let dialog = new Dialog({
content: 'Dialog content'
})
dialog.appendTo('#ej2_dialog')
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 property I 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

let dialog = new Dialog({
animationSettings: { effect: 'Zoom' }
})
dialog.appendTo('#ej2_dialog')
Animation duration property: animation.show.duration

$('#dialog').ejDialog({

Animation: {
show: {
effect: 'slide',
duration: 500
}
}

})

 property: animationSettings.duration
let dialog = new Dialog({
animationSettings: { effect: 'Zoom', duration: 500 }
})
dialog.appendTo('#ej2_dialog')
Animation delay Not applicable property: animationSettings.delay

let dialog = new Dialog({
animationSettings: { effect: 'Zoom', duration: 500, delay: 300 }
})
dialog.appendTo('#ej2_dialog')

Draggable and resizing

Behavior API in Essential® JS 1 API in Essential® JS 2
Draggable dialog property: allowDraggable </br>
$('#dialog').ejDialog({
allowDraggable: true
}) 		property: allowDragging

let dialog = new Dialog({
allowDragging: true
})
dialog.appendTo('#ej2_dialog')
Event triggers when the user drags the dialog Event:drag

$('#dialog').ejDialog({
drag: function () {}
}) 		Event: drag

let dialog = new Dialog({
drag: function() {}
})
dialog.appendTo('#ej2Dialog')
Event triggers when the start to drag the dialog Event:dragStart

$('#dialog').ejDialog({
dragStart: function () {}
}) 		Event: dragStart </br/>
let dialog = new Dialog({
dragStart: function() {}
})
dialog.appendTo('#ej2Dialog')
Event triggers when the stops to drag the dialog Event:dragStop

$('#dialog').ejDialog({
dragStop: function () {}
}) 		Event: dragStop

let dialog = new 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

let dialog = new Dialog({
target: '#dialogTarget'
})
dialog.appendTo('#ej2Dialog')
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

let dialog = new Dialog({
position: { X: 300, Y: 100}
}) dialog.appendTo('#ej2Dialog')
positioning dialog using position values Not Applicable property: position

let dialog = new Dialog({
position: { X: 'Center', Y: 'Center'}
}) dialog.appendTo('#ej2Dialog')

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

let dialog = new Dialog({
visible: true
})
dialog.appendTo('#ej2Dialog')

Dialog Mode

Behavior API in Essential® JS 1 API in Essential® JS 2
Render modal dialog property: enableModal

$('#dialog').ejDialog({
enableModal: true
}) 		property: isModal
let dialog = new Dialog({
isModal: true
})
dialog.appendTo('#ej2Dialog')

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 property 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 property 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

let dialog = new Dialog ({ enablePersistence: true
})
dialog.appendTo('#ej2Dialog')

Common

Behavior API in Essential® JS 1 API in Essential® JS 2
Adjusting Height property: height

$('#dialog').ejDialog({
height: 400
}) 		property: height

let dialog = new Dialog({
height: '50%'
})
dialog.appendTo('#ej2Dialog')
Adjusting width property: width

$('#dialog').ejDialog({
width: 400
}) 		property: width

let dialog = new Dialog({
width: '50%'
})
dialog.appendTo('#ej2Dialog')
Adding custom class property: cssClass

$('#dialog').ejDialog({
cssClass: 'custom-class'
}) 		property: cssClass

let dialog = new Dialog({
cssClass: 'custom-class'
})
dialog.appendTo('#ej2Dialog')
Adding zIndex property: zIndex

$('#dialog').ejDialog({
zIndex: 2000
}) 		property: zIndex

let dialog = new Dialog({
zIndex: 2000
})
dialog.appendTo('#ej2Dialog')
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()

let dialog = new Dialog()
dialog.appendTo(''#ej2Dialog'')
dialog.hide()
Event triggers before the dialog closes Event:beforeClose

$('#dialog').ejDialog({
beforeClose: function () {}
}) 		Event:beforeClose

let dialog = new Dialog({
beforeClose: beforeCloseDialog
})
dialog.appendTo('#ej2Dialog')
function beforeCloseDialog() {}
Event triggers when the dialog closes Event:close

$('#dialog').ejDialog({
close: function () {}
}) 		Event:close

let dialog = new Dialog({
close: CloseDialog
})
dialog.appendTo('#ej2Dialog')
function CloseDialog() {}
Destroy the control Method:destroy()

$('#dialog').ejDialog('destroy'); 		Method:destroy()

let dialog = new 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()

let dialog = new Dialog()
dialog.appendTo(''#ej2Dialog'')
dialog.show()
Event trigger before the dialog opens Event: beforeOpen

$('#dialog').ejDialog({
beforeOpen: function () {}
}) 		Event:beforeOpen

let dialog = new Dialog({
beforeOpen: beforeOpenDialog
})
dialog.appendTo('#ej2Dialog')
function beforeOpenDialog() {}
Event triggers when the opens the dialog Event:open

$('#dialog').ejDialog({
open: function () {}
}) 		Event: open

let dialog = new Dialog({
open: function() {}
})
dialog.appendTo('#ej2Dialog')
Refresh the dialog Method:refresh()

$('#dialog').ejDialog('refresh') 		Method: refreshPosition()

let dialog = new 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

let dialog = new 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
let dialog = new Dialog ({ overlayClick: function() {}
})
dialog.appendTo('#ej2Dialog')

Accessibility and Localization

Behavior API in Essential® JS 1 API in Essential® JS 2
Keyboard Navigation property : allowKeyboardNavigation

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

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

let dialog = new Dialog({
locale: 'es-ES'
})
dialog.appendTo('#ej2_dialog');
Right to left property: enableRTL

$('#dialog').ejDialog({
enableRTL: true
}) 		property : enableRtl

let dialog = new Dialog({
enableRtl: true
})
dialog.appendTo('#ej2_dialog');