Search results

Migration from Essential JS 1

This article describes the API migration process of Dialog component 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>
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

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

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