Migration from Essential® JS 1

8 Dec 202417 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

@Html.EJ().Dialog("dialog").AllowKeyboardNavigation(true) 		No separate Property for enable/disable keyboard navigation. Its enabled by default.
Localization Property : locale

@Html.EJ().Dialog("dialog").Locale("es-ES") 		Property : locale

@Html.EJS().Dialog("dialog").Locale("es-ES").Render()
Right to left Property: enableRTL

@Html.EJ().Dialog("dialog").EnableRtl(true) 		Property: enableRTL

@Html.EJS().Dialog("dialog").EnableRtl(true).Render()
Behavior Property in Essential® JS 1 Property in Essential® JS 2
Header Content Property : title

@Html.EJ().Dialog("dialog").Title("EJ1 Dialog header")
Method : setTitle
$(‘#dialog’).ejDialog(‘setTitle’, ‘EJ1 Dialog Header’);		 Property : header

@Html.EJS().Dialog("dialog").Header("EJ2 Dialog").Render()
close button Property : actionButtons

@{ List<string> actionButtons = new List<string>(); actionButtons.Add("close"); }

@Html.EJ().Dialog("dialog").ActionButtons(actionButtons)
 Property : showCloseIcon

@Html.EJS().Dialog("dialog").ShowCloseIcon(true).Render()
Event triggers when click on action buttons Event: actionButtonClick

@{List<string> actionButtons = new List<string>(); actionButtons.Add("close"); }

@Html.EJ().Dialog("dialog").ActionButtons(actionButtons).ClientSideEvents(event =>event.ActionButtonClick("playMedia"))

function playMedia(args) {}
 Not Applicable
Minimize Property : actionButtons

@{ List<string> actionButtons = new List<string>(); actionButtons.Add("minimize"); }

@Html.EJ().Dialog("dialog").ActionButtons(actionButtons)
 Not Applicable
Maximize Property : actionButtons

@{ List<string> actionButtons = new List<string>(); actionButtons.Add("maximize"); }

@Html.EJ().Dialog("dialog").ActionButtons(actionButtons)
 Not Applicable
Collapse /Expand Property : actionButtons
Method : collapse(), expand ()

@{ List<string> actionButtons = new List<string>(); actionButtons.Add("collapsible"); }

@Html.EJ().Dialog("dialog").ActionButtons(actionButtons)
$(‘#dialog’).ejDialog(‘collapse’);
$(‘#dialog’).ejDialog(‘expand’)		 Not Applicable
Event triggers when expanding the collapsed dialog Event: expand

@Html.EJ().Dialog("dialog").ClientSideEvents(evt => evt.Expand("expandAction"))

function expandAction(args) {}
 Not Applicable
Event triggers when collapsing the expanded dialog Event: collapse

@Html.EJ().Dialog("dialog").ClientSideEvents(evt => evt.Collapse("collapseAction"))

function collapseAction(args) {}
 Not Applicable
Pin Property : actionButtons

@{ List<string> actionButtons = new List<string>(); actionButtons.Add("pin"); }

@Html.EJ().Dialog("dialog").ActionButtons(actionButtons)
 Not Applicable
Header visibility Property: showHeader

@Html.EJ().Dialog("dialog").ShowHeader(true) 		Not Applicable
Close on escape key press Property : closeOnEscape

@Html.EJ().Dialog("dialog").CloseOnEscape(true) 		Property : closeOnEscape

@Html.EJS().Dialog("dialog").CloseOnEscape(true).Render()
Behavior Property in Essential® JS 1 Property in Essential® JS 2
Footer Content Property :footerTemplateId

@Html.EJ().Dialog("dialog").FooterTemplateId("sample") 		Property: footerTemplate

@Html.EJS().Dialog("dialog").FooterTemplate("<button>Submit</button>").Render()
Footer action buttons Not applicable Property : buttons

@Html.EJS().Dialog("dialog").Buttons(ViewBag.DefaultButtons).Render()

public ActionResult DefaultFunctionalities() { List<DialogDialogButton> buttons = new List<DialogDialogButton>() { }; buttons.Add(new DialogDialogButton() { Click = "dlgButtonClick", ButtonModel = new DefaultButtonModel() { content = "Ok" } }); ViewBag.DefaultButtons = buttons; return View(); } public class DefaultButtonModel { public string content { get; set; }
Footer visibility Property : showFooter

@Html.EJ().Dialog("dialog").ShowFooter(true) 		Not Applicable

Content

Behavior Property in Essential® JS 1 Property in Essential® JS 2
Dialog content Method : setContent

@Html.EJ().Dialog("dialog")
$(‘#dialog’).ejDialog(‘setContent’, ‘Dialog Content’)		 Property : content

@Html.EJS().Dialog("dialog").Content("Dialog content").Render()
Loading content using AJAX request Property : contentType, contentUrl

@Html.EJ().Dialog("dialog").contentType("ajax").ContentUrl('') 		Not Applicable
Event triggers after the dialog content loaded in DOM Event: contentLoad

@Html.EJ().Dialog("dialog").ClientSideEvents(evt => evt.ContentLoad("onLoad"))

function onLoad(args) {}
 Not Applicable
Event trigger when fails to load ajax content Event: ajaxError

@Html.EJ().Dialog("dialog").ClientSideEvents(evt => evt.AjaxError("onAjaxError"))

function onAjaxError(args) {}
 Not Applicable
Event trigger when load ajax content successfully Event: ajaxSuccess

@Html.EJ().Dialog("dialog").ClientSideEvents(evt => evt.AjaxSuccess("onAjaxSuccess"))

function onAjaxSuccess(args) {}
 Not Applicable

Animation

Behavior Property in Essential® JS 1 Property in Essential® JS 2
Enabling Animation Property : enableAnimation

@Html.EJ().Dialog("dialog").EnableAnimation(true) 		Not Applicable
Animation effects Property : animation.show.effect

@Html.EJ().Dialog("dialog").Animation(animate => animate.Show(show => show.Effect("slide"))
 Property : animationSettings.effect

@Html.EJS().Dialog("default_dialog").AnimationSettings(new DialogAnimationSettings() { Effect = DialogEffect.Zoom }).Render()
Animation duration Property: animation.show.duration

@Html.EJ().Dialog("dialog").Animation(animate => animate.Show(show => show.Duration(500).Effect("slide"))
 Property : animationSettings.duration

@Html.EJS().Dialog("default_dialog").AnimationSettings(new DialogAnimationSettings() { Effect = DialogEffect.Zoom, DialogEffect.Duration(500) }).Render()
Animation delay Not applicable Property: animationSettings.delay

@Html.EJS().Dialog("default_dialog").AnimationSettings(new DialogAnimationSettings() { Effect = DialogEffect.Zoom, DialogEffect.Duration(500), DialogEffect.Delay(500) }).Render()

Draggable and resizing

Behavior Property in Essential® JS 1 Property in Essential® JS 2
Draggable dialog Property : allowDraggable

@Html.EJ().Dialog("dialog").AllowDraggable(true) 		Property : allowDragging

@Html.EJS().Dialog("dialog").AllowDragging(true).Render()
Event triggers when the user drags the dialog Event: drag

@Html.EJ().Dialog("dialog").ClientSideEvents(evt => evt.Drag("onDrag"))

function onDrag(args) {}
 Event: drag

@Html.EJS().Dialog("dialog").Drag("onDrag").Render()

function onDrag(args) {}
Event triggers when the start to drag the dialog Event: dragStart

@Html.EJ().Dialog("dialog").ClientSideEvents(evt => evt.DragStart("onDragStart"))

function onDragStart(args) {}
 Event: dragStart

@Html.EJS().Dialog("dialog").DragStart("onDragStart").Render()

function onDragStart(args) {}
Event triggers when the stops to drag the dialog Event: dragStop

@Html.EJ().Dialog("dialog").ClientSideEvents(evt => evt.DragStop("onDragStop"))

function onDragStop(args) {}
 Event: dragStop

@Html.EJS().Dialog("dialog").DragStop("onDragStop").Render()

function onDragStop(args) {}
Resizing dialog Property : enableResize

@Html.EJ().Dialog("dialog").EnableResize(true) 		Not applicable
Event triggers when resizing the dialog Event: resize

@Html.EJ().Dialog("dialog").ClientSideEvents(evt => evt.Resize("onReSize"))

function onReSize(args) {}
 Not Applicable
Event triggers when starts to resizing the dialog Event: resizeStart

@Html.EJ().Dialog("dialog").ClientSideEvents(evt => evt.ResizeStart("onResizeStart"))

function onResizeStart(args) {}
 Not Applicable
Event triggers when the stops to resizing the dialog Event: resizeStop

@Html.EJ().Dialog("dialog").ClientSideEvents(evt => evt.ResizeStop("onResizeStop"))

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

@Html.EJ().Dialog("dialog").Target("#dialogTarget") 		Property: target

@Html.EJS().Dialog("dialog").Target("#dialogTarget").Render()
Element for draggable area Property : containment

@Html.EJ().Dialog("dialog").Containment("#dragArea") 		Not applicable

Position

Behavior Property in Essential® JS 1 Property in Essential® JS 2
Customizing dialog position using X, Y coordinate values Property : position

@Html.EJ().Dialog("dialog").ClientSideEvents(evt => evt.Position.X(300).Y(100))
 Property : position

@Html.EJS().Dialog("dialog").Position(obj => obj.X("300").Y("100")).Render()
positioning dialog using position values Not Applicable Property: position

@Html.EJS().Dialog("dialog").Position(obj => obj.X("center").Y("center")).Render()

Visibility

Behavior Property in Essential® JS 1 Property in Essential® JS 2
Render dialog in visible/hidden state Property: showOnInit

@Html.EJ().Dialog("dialog").ShowOnInit(true) 		Property: visible

@Html.EJS().Dialog("dialog").visible(false).Render()

Dialog mode

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

@Html.EJ().Dialog("dialog").EnableModal(true) 		Property : isModal

@Html.EJS().Dialog("dialog").IsModal(true).Render()

Tooltip

Behavior Property in Essential® JS 1 Property in Essential® JS 2
Sets the tooltip for dialog buttons Property : tooltip

@Html.EJ().Dialog("dialog").ClientSideEvents(evt => evt.Tooltip("tooltip"))

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

@Html.EJ().Dialog("dialog").Enabled(false) 		Not Applicable
Enable/ Disable page scrolling Property: backgroundScroll

@Html.EJ().Dialog("dialog").BackgroundScroll(false) 		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

@Html.EJ().Dialog("dialog").EnablePersistence(true) 		Property : enablePersistence

@Html.EJS().Dialog("dialog").EnablePersistence(true).Render()

Common

Behavior Property in Essential® JS 1 Property in Essential® JS 2
Adjusting Height Property : height

@Html.EJ().Dialog("dialog").Height("400") 		Property : height

@Html.EJS().Dialog("dialog").Height("50%").Render()
Adjusting width Property: width

@Html.EJ().Dialog("dialog").Width("400") 		Property : width

@Html.EJS().Dialog("dialog").Width("50%").Render()
Adding custom class Property: cssClass

@Html.EJ().Dialog("dialog").cssClass("custom-class") 		Property: cssClass

@Html.EJS().Dialog("dialog").CssClass("custom-class").Render()
Adding zIndex Property: zIndex

@Html.EJ().Dialog("dialog").ZIndex("2000") 		Property: zIndex

@Html.EJS().Dialog("dialog").ZIndex("2000").Render()
Maximum height Property: maxHeight

@Html.EJ().Dialog("dialog").MaxHeight("600") 		Not Applicable
Maximum width Property: maxWidth

@Html.EJ().Dialog("dialog").MaxWidth("600") 		Not Applicable
Minimum height Property: minHeight

@Html.EJ().Dialog("dialog").MinHeight("300") 		Not Applicable
Minimum width Property: minWidth

@Html.EJ().Dialog("dialog").MinWidth("300") 		Not Applicable
Adding html attributes Property: htmlAttributes

@Html.EJ().Dialog("dialog").ClientSideEvents(evt => evt.HtmlAttributes("htmlAttributes"))

function htmlAttributes: object { class: 'my-class' }
Not Applicable
Custom icon in the header Property: faviconCSS

@Html.EJ().Dialog("dialog").FaviconCSS("custom-icon") 		Not Applicable
Rounded corner appearance Property: showRoundedCorner

@Html.EJ().Dialog("dialog").ShowRoundedCorner(true) 		Not Applicable
Make control flexible for mobile view Property: isResponsive

@Html.EJ().Dialog("dialog").IsResponsive(true) 		Not Applicable
Close the Dialog Method: close()

@Html.EJ().Dialog("dialog")
$(‘#dialog’).ejDialog(‘close’)		 Method : hide()

@Html.EJS().Dialog("dialog").Render()

var dialogObj= document.getElementById("dialog").ej2Instances[0]; dialogObj.hide();
Event triggers before the dialog closes Event: beforeClose

@Html.EJ().Dialog("dialog").ClientSideEvents(evt => evt.BeforeClose("onBeforeClose"))

function onBeforeClose(args) {}
Event: beforeClose

@Html.EJS().Dialog("dialog").BeforeClose("onBeforeClose").Render()

function onBeforeClose(args) {}
Event triggers when the dialog closes Event: close

@Html.EJ().Dialog("dialog").ClientSideEvents(evt => evt.Close("onClose"))

function onClose(args) {}
Event: close

@Html.EJS().Dialog("dialog").Close("onClose").Render()

function onClose(args) {}
Destroy the control Method: destroy()

@Html.EJ().Dialog("dialog")
$(‘#dialog’).ejDialog(‘destroy’)		 Method: destroy()

@Html.EJS().Dialog("dialog").Render()

var dialogObj= document.getElementById("dialog").ej2Instances[0]; dialogObj.destroy();
Focus the dialog element Method: focus()

@Html.EJ().Dialog("dialog")
$(‘#dialog’).ejDialog(‘focus’)		 Not Applicable
Check whether the dialog is open Method: isOpen()

@Html.EJ().Dialog("dialog")
$(‘#dialog’).ejDialog(‘isOpen’)		 Not Applicable
Maximize the dialog Method: maximize()

@Html.EJ().Dialog("dialog")
$(‘#dialog’).ejDialog(‘maximize’)		 Not Applicable
Minimize the dialog Method: minimize()

@Html.EJ().Dialog("dialog")
$(‘#dialog’).ejDialog(‘minimize’)		 Not Applicable
Open the dialog Method: open()

@Html.EJ().Dialog("dialog")
$(‘#dialog’).ejDialog(‘open’)		 Method : show()

@Html.EJS().Dialog("dialog").Render()

var dialogObj= document.getElementById("dialog").ej2Instances[0]; dialogObj.show();
Event trigger before the dialog opens Event: beforeOpen

@Html.EJ().Dialog("dialog").ClientSideEvents(evt => evt.BeforeOpen("onBeforeOpen"))

function onBeforeOpen(args) {}
Event: beforeOpen

@Html.EJS().Dialog("dialog").BeforeOpen("onBeforeOpen").Render()

function onBeforeOpen(args) {}
Event triggers when the opens the dialog Event: open

@Html.EJ().Dialog("dialog").ClientSideEvents(evt => evt.Open("onOpen"))

function onOpen(args) {}
Event: open

@Html.EJS().Dialog("dialog").Open("onOpen").Render()

function onOpen(args) {}
Refresh the dialog Method: refresh()

@Html.EJ().Dialog("dialog")
$(‘#dialog’).ejDialog(‘refresh’)		 Method : refreshPosition()

@Html.EJS().Dialog("dialog").Render()

var dialogObj= document.getElementById("dialog").ej2Instances[0]; dialogObj.refreshPosition();
Pin/ unpin the dialog Method: pin

@Html.EJ().Dialog("dialog")
$(‘#dialog’).ejDialog(‘pin’);
$(‘#dialog’).ejDialog(‘unpin’);		 Not Applicable
Event triggers after the dialog created successfully Event: create

@Html.EJ().Dialog("dialog").ClientSideEvents(evt => evt.Create("onCreate"))

function onCreate(args) {}
Event : created

@Html.EJS().Dialog("dialog").Created("onCreated").Render()

function onCreated(args) {}
Event triggers when the control destroyed successfully Event: destroy

@Html.EJ().Dialog("dialog").ClientSideEvents(evt => evt.Destroy("onDestroy"))

function onDestroy(args) {}
Not Applicable
Event triggers on clicking on modal dialog overlay Not Applicable Event : overlayClick

@Html.EJS().Dialog("dialog").OverlayClick("onOverlayClick").Render()

function onOverlayClick(args) {}