Migration from Essential JS 1
4 Apr 202217 minutes to read
This article describes the API migration process of Dialog control from Essential JS 1 to Essential JS 2.
Accessibility and localization
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Keyboard Navigation |
Property : allowKeyboardNavigation<ej-dialog id="dialog" allow-keyboard-navigation="true"></ej-dialog>
|
No separate Property for enable/disable keyboard navigation. Its enabled by default. |
| Localization |
Property : locale<ej-dialog id="dialog" locale="es-ES"></ej-dialog>
|
Property : locale<ejs-dialog id="dialog" locale="es-ES"></ejs-dialog>
|
| Right to left |
Property: enableRTL<ej-dialog id="dialog" enable-rtl="true"></ej-dialog>
|
Property: enableRTL<ejs-dialog id="dialog" enableRtl="true"></ejs-dialog>
|
Header
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Header Content |
Property : title<ej-dialog id="dialog" title="EJ1 Dialog header"></ej-dialog>Method : setTitle $(‘#dialog’).ejDialog(‘setTitle’, ‘EJ1 Dialog Header’); |
Property : header<ejs-dialog id="dialog" header="EJ2 Dialog"></ejs-dialog>
|
| close button |
Property : actionButtons@{List<string> icon = new List<string>() { "close" }; }<ej-dialog id="dialog" action-buttons="icon"> |
Property : showCloseIcon<ejs-dialog id="dialog" showCloseIcon="true"></ejs-dialog>
|
| Event triggers when click on action buttons |
Event: actionButtonClick<ej-dialog id="dialog" action-button-click="playMedia"></ej-dialog>function playMedia(args) {} |
Not Applicable |
| Minimize |
Property : actionButtons@{List<string> icon = new List<string>() { "minimize" }; }<ej-dialog id="dialog" action-buttons="icon"> |
Not Applicable |
| Maximize |
Property : actionButtons@{List<string> icon = new List<string>() { "maximize" }; }<ej-dialog id="dialog" action-buttons="icon"> |
Not Applicable |
| Collapse /Expand |
Property : actionButtons Method : collapse(), expand () @{List<string> icon = new List<string>() { "collapsible" }; }<ej-dialog id="dialog" action-buttons="icon">$(‘#dialog’).ejDialog(‘collapse’); $(‘#dialog’).ejDialog(‘expand’) |
Not Applicable |
| Event triggers when expanding the collapsed dialog |
Event: expand<ej-dialog id="dialog" expand="expandAction"></ej-dialog>function expandAction(args) {} |
Not Applicable |
| Event triggers when collapsing the expanded dialog |
Event: collapse<ej-dialog id="dialog" collapse="collapseAction"></ej-dialog>function collapseAction(args) {} |
Not Applicable |
| Pin |
Property : actionButtons@{List<string> icon = new List<string>() { "pin" }; }<ej-dialog id="dialog" action-buttons="icon"> |
Not Applicable |
| Header visibility |
Property: showHeader<ej-dialog id="dialog" show-header="true"></ej-dialog>
|
Not Applicable |
| Close on escape key press |
Property : closeOnEscape<ej-dialog id="dialog" closeOnEscape="true"></ej-dialog>
|
Property : closeOnEscape<ejs-dialog id="dialog" closeOnEscape="true"></ejs-dialog>
|
Footer
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Footer Content |
Property :footerTemplateId<ej-dialog id="dialog" footer-templateId="sample"></ej-dialog>
|
Property: footerTemplate<ejs-dialog id="dialog" footerTemplate="<button>Submit</button>"></ejs-dialog>
|
| Footer action buttons | Not applicable |
Property : buttons<ejs-dialog id="dialog"><e-dialog-buttons><e-dialog-dialogbutton buttonModel="ViewBag.defaultbutton"></e-dialog-dialogbutton></e-dialog-buttons><ejs-dialog>public IActionResult DefaultFunctionalities() { {content = "Ok"} return View(); } |
| Footer visibility |
Property : showFooter<ej-dialog id="dialog" show-footer="true"></ej-dialog>
|
Not Applicable |
Content
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Dialog content |
Method : setContent<ej-dialog id="dialog"></ej-dialog>$(‘#dialog’).ejDialog(‘setContent’, ‘Dialog Content’) |
Property : content<ejs-dialog id="dialog" content="Dialog content"></ejs-dialog>
|
| Loading content using AJAX request |
Property : contentType, contentUrl<ej-dialog id="dialog" content-type="ajax" content-url=""></ej-dialog>
|
Not Applicable |
| Event triggers after the dialog content loaded in DOM |
Event: contentLoad<ej-dialog id="dialog" content-load="onLoad"></ej-dialog>function onLoad(args) {} |
Not Applicable |
| Event trigger when fails to load ajax content |
Event: ajaxError<ej-dialog id="dialog" ajax-error="onAjaxError"></ej-dialog>function onAjaxError(args) {} |
Not Applicable |
| Event trigger when load ajax content successfully |
Event: ajaxSuccess<ej-dialog id="dialog" ajax-success="onAjaxSuccess"></ej-dialog>function onAjaxSuccess(args) {} |
Not Applicable |
Animation
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Enabling Animation |
Property : enableAnimation<ej-dialog id="dialog" enable-animation="true" ></ej-dialog>
|
Not Applicable |
| Animation effects |
Property : animation.show.effect<ej-dialog id="dialog"></ej-dialog><e-animation><e-show effect="Slide" /></e-animation> |
Property : animationSettings.effect@{ var defaultanimation = new Syncfusion.EJ2.Popups.DialogAnimationSettings { Effect = Syncfusion.EJ2.Popups.DialogEffect.Zoom }; }<ejs-dialog id="dialog" animationSettings="defaultanimation"><ejs-dialog> |
| Animation duration |
Property: animation.show.duration<ej-dialog id="dialog"></ej-dialog><e-animation><e-show duration="500" effect="Slide" /></e-animation> |
Property : animationSettings.duration@{ var defaultanimation = new Syncfusion.EJ2.Popups.DialogAnimationSettings { Effect = Syncfusion.EJ2.Popups.DialogEffect.Zoom, Duration = Syncfusion.EJ2.Popups.DialogEffect.Duration(500)}; }<ejs-dialog id="dialog" animationSettings="defaultanimation"><ejs-dialog> |
| Animation delay | Not applicable |
Property: animationSettings.delay@{ var defaultanimation = new Syncfusion.EJ2.Popups.DialogAnimationSettings { Effect = Syncfusion.EJ2.Popups.DialogEffect.Zoom, Duration = Syncfusion.EJ2.Popups.DialogEffect.Duration(500), Delay = Syncfusion.EJ2.Popups.DialogEffect.Duration(500)}; }<ejs-dialog id="dialog" animationSettings="defaultanimation"><ejs-dialog> |
Draggable and resizing
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Draggable dialog |
Property : allowDraggable<ej-dialog id="dialog" allow-draggable="true" ></ej-dialog>
|
Property : allowDragging<ejs-dialog id="dialog" allowDragging="true"></ejs-dialog>
|
| Event triggers when the user drags the dialog |
Event: drag<ej-dialog id="dialog" drag="onDrag"></ej-dialog>function onDrag(args) {} |
Event: drag<ejs-dialog id="dialog" drag="onDrag"></ejs-dialog>function onDrag(args) {} |
| Event triggers when the dialog is started to drag |
Event: dragStart <ej-dialog id="dialog" drag-start="onDragStart"></ej-dialog>function onDragStart(args) {} |
Event: dragStart <ejs-dialog id="dialog" dragStart="onDragStart"></ejs-dialog>function onDragStart(args) {} |
| Event triggers when the dialog is stopped to drag |
Event: dragStop<ej-dialog id="dialog" drag-stop="onDragStop"></ej-dialog>function onDragStop(args) {} |
Event: dragStop<ejs-dialog id="dialog" dragStop="onDragStop"></ejs-dialog>function onDragStop(args) {} |
| Resizing dialog |
Property : enableResize<ej-dialog id="dialog" enable-resize="true" ></ej-dialog>
|
Not applicable |
| Event triggers when resizing the dialog |
Event: resize <ej-dialog id="dialog" resize="onReSize"></ej-dialog>function onReSize(args) {} |
Not Applicable |
| Event triggers when resizing the dialog is started |
Event: resizeStart<ej-dialog id="dialog" resize-start="onResizeStart"></ej-dialog>function onResizeStart(args) {} |
Not Applicable |
| Event triggers when resizing the dialog is stopped |
Event: resizeStop<ej-dialog id="dialog" resize-stop="onResizeStop"></ej-dialog>function onResizeStop(args) {} |
Not Applicable |
Target
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Target element to append dialog in document |
Property : target <ej-dialog id="dialog" target="#dialogTarget" ></ej-dialog>
|
Property: target<ejs-dialog id="dialog" target="#dialogTarget"></ejs-dialog>
|
| Element for draggable area |
Property : containment<ej-dialog id="dialog" containment="#dragArea" ></ej-dialog>
|
Not applicable |
Position
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Customizing dialog position using X, Y coordinate values |
Property : position<ej-dialog id="dialog"><e-dialog-position x-value="300" y-value="100" /></ej-dialog> |
Property : position<ejs-dialog id="dialog"><e-dialog-position X="300" Y="100"></e-dialog-position></ejs-dialog> |
| positioning dialog using position values | Not Applicable |
Property: position<ejs-dialog id="dialog"><e-dialog-position X="center" Y="center"></e-dialog-position></ejs-dialog> |
Visibility
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Render dialog in visible/hidden state |
Property: showOnInit<ej-dialog id="dialog" show-onInit="true" ></ej-dialog>
|
Property: visible<ejs-dialog id="dialog" visible="false"></ejs-dialog>
|
Dialog mode
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Render modal dialog |
Property : enableModal<ej-dialog id="dialog" enable-modal="true" ></ej-dialog>
|
Property : isModal<ejs-dialog id="dialog" isModal="true"></ejs-dialog>
|
Tooltip
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Sets the tooltip for dialog buttons |
Property : tooltip<ej-dialog id="dialog" tooltip="tooltip"></ej-dialog>function tooltip(): object { close: 'Exit' } |
No Separate Property for tooltip. It renders based on locale text. |
Control state
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Enable/Disable the control |
Property : enabled <ej-dialog id="dialog" enabled="false" ></ej-dialog>
|
Not Applicable |
| Enable/ Disable page scrolling |
Property: backgroundScroll<ej-dialog id="dialog" background-scroll="false" ></ej-dialog>
|
No separate Property for disabling page scroll. By default, scrolling prevented for modal dialog |
State maintenance
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Save the model values in local storage or cookies |
Property : enablePersistence <ej-dialog id="dialog" enable-persistence="true" ></ej-dialog>
|
Property : enablePersistence <ejs-dialog id="dialog" enablePersistence="true"></ejs-dialog>
|
Common
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Adjusting Height |
Property : height <ej-dialog id="dialog" height="400" ></ej-dialog>
|
Property : height <ejs-dialog id="dialog" height="50%"></ejs-dialog>
|
| Adjusting width |
Property: width <ej-dialog id="dialog" width="400" ></ej-dialog>
|
Property : width <ejs-dialog id="dialog" width="50%"></ejs-dialog>
|
| Adding custom class |
Property: cssClass <ej-dialog id="dialog" css-class="custom-class" ></ej-dialog>
|
Property: cssClass <ejs-dialog id="dialog" cssClass="custom-class"></ejs-dialog>
|
| Adding zIndex |
Property: zIndex <ej-dialog id="dialog" zindex="2000" ></ej-dialog>
|
Property: zIndex <ejs-dialog id="dialog" zindex="2000"></ejs-dialog>
|
| Maximum height |
Property: maxHeight <ej-dialog id="dialog" max-height="600" ></ej-dialog>
|
Not Applicable |
| Maximum width |
Property: maxWidth <ej-dialog id="dialog" max-width="600" ></ej-dialog>
|
Not Applicable |
| Minimum height |
Property: minHeight <ej-dialog id="dialog" min-height="600" ></ej-dialog>
|
Not Applicable |
| Minimum width |
Property: minWidth <ej-dialog id="dialog" min-width="300" ></ej-dialog>
|
Not Applicable |
| Adding html attributes |
Property: htmlAttributes <ej-dialog id="dialog" html-attributes="htmlAttributes"></ej-dialog>function htmlAttributes(): object { class: 'my-class' } |
Not Applicable |
| Custom icon in the header |
Property: faviconCSS <ej-dialog id="dialog" faviconCSS="custom-icon" ></ej-dialog>
|
Not Applicable |
| Rounded corner appearance |
Property: showRoundedCorner <ej-dialog id="dialog" show-rounded-corner="true" ></ej-dialog>
|
Not Applicable |
| Make control flexible for mobile view |
Property: isResponsive <ej-dialog id="dialog" is-responsive="true" ></ej-dialog>
|
Not Applicable |
| Close the Dialog |
Method: close() <ej-dialog id="dialog"></ej-dialog> $(‘#dialog’).ejDialog(‘close’) |
Method : hide() <ejs-dialog id="dialog"></ejs-dialog>var dialogObj= document.getElementById("dialog").ej2Instances[0]; dialogObj.hide(); |
| Event triggers before the dialog closes |
Event: beforeClose <ej-dialog id="dialog" before-close="onBeforeClose"></ej-dialog>function onBeforeClose(args) {} |
Event: beforeClose <ejs-dialog id="dialog" beforeClose="onBeforeClose"></ejs-dialog>function onBeforeClose(args) {} |
| Event triggers when the dialog closes |
Event: close <ej-dialog id="dialog" close="onClose"></ej-dialog>function onClose(args) {} |
Event: close <ejs-dialog id="dialog" close="onClose"></ejs-dialog>function onClose(args) {} |
| Destroy the control |
Method: destroy() <ej-dialog id="dialog"></ej-dialog> $(‘#dialog’).ejDialog(‘destroy’) |
Method: destroy() <ejs-dialog id="dialog"></ejs-dialog>var dialogObj= document.getElementById("dialog").ej2Instances[0]; dialogObj.destroy(); |
| Focus the dialog element |
Method: focus() <ej-dialog id="dialog"></ej-dialog> $(‘#dialog’).ejDialog(‘focus’) |
Not Applicable |
| Check whether the dialog is open |
Method: isOpen() <ej-dialog id="dialog"></ej-dialog> $(‘#dialog’).ejDialog(‘isOpen’) |
Not Applicable |
| Maximize the dialog |
Method: maximize() <ej-dialog id="dialog"></ej-dialog> $(‘#dialog’).ejDialog(‘maximize’) |
Not Applicable |
| Minimize the dialog |
Method: minimize() <ej-dialog id="dialog"></ej-dialog> $(‘#dialog’).ejDialog(‘minimize’) |
Not Applicable |
| Open the dialog |
Method: open() <ej-dialog id="dialog"></ej-dialog> $(‘#dialog’).ejDialog(‘open’) |
Method : show() <ejs-dialog id="dialog"></ejs-dialog>var dialogObj= document.getElementById("dialog").ej2Instances[0]; dialogObj.show(); |
| Event triggers before the dialog opens |
Event: beforeOpen <ej-dialog id="dialog" before-open="onBeforeOpen"></ej-dialog>function onBeforeOpen(args) {} |
Event: beforeOpen <ejs-dialog id="dialog" beforeOpen="onBeforeOpen"></ejs-dialog>function onBeforeOpen(args) {} |
| Event triggers when the dialog opens |
Event: open <ej-dialog id="dialog" open="onOpen"></ej-dialog>function onOpen(args) {} |
Event: open <ejs-dialog id="dialog" open="onOpen"></ejs-dialog>function onOpen(args) {} |
| Refresh the dialog |
Method: refresh() <ej-dialog id="dialog"></ej-dialog> $(‘#dialog’).ejDialog(‘refresh’) |
Method : refreshPosition() <ejs-dialog id="dialog"></ejs-dialog>var dialogObj= document.getElementById("dialog").ej2Instances[0]; dialogObj.refreshPosition(); |
| Pin/ unpin the dialog |
Method: pin <ej-dialog id="dialog"></ej-dialog> $(‘#dialog’).ejDialog(‘pin’); $(‘#dialog’).ejDialog(‘unpin’); |
Not Applicable |
| Event triggers after the dialog is created successfully |
Event: create <ej-dialog id="dialog" create="onCreate"></ej-dialog>function onCreate(args) {} |
Event : created <ejs-dialog id="dialog" created="onCreated"></ejs-dialog>function onCreated(args) {} |
| Event triggers when the control is destroyed successfully |
Event: destroy <ej-dialog id="dialog" destroy="onDestroy"></ej-dialog>function onDestroy(args) {} |
Not Applicable |
| Event triggers on clicking on modal dialog overlay | Not Applicable |
Event : overlayClick <ejs-dialog id="dialog" overlayClick="onOverlayClick"></ejs-dialog>function onOverlayClick(args) {} |