This article describes the API migration process of Dialog component from Essential JS 1 to Essential JS 2.
| 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> |
| 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> |
| 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 |
| 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 |
| 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> |
| 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 start to drag the dialog | 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 stops to drag the dialog | 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 starts to resizing the dialog | Event: resizeStart<ej-dialog id="dialog" resize-start="onResizeStart"></ej-dialog>function onResizeStart(args) {} |
Not Applicable |
| Event triggers when the stops to resizing the dialog | Event: resizeStop<ej-dialog id="dialog" resize-stop="onResizeStop"></ej-dialog>function onResizeStop(args) {} |
Not Applicable |
| 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 |
| 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> |
| 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> |
| 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> |
| 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. |
| 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 |
| 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> |
| 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 trigger 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 opens the dialog | 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 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 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) {} |