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@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 |
| 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 |
| 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() |
| 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 |
| 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 |
| 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() |
| 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() |
| 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() |
| 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. |
| 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 |
| 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() |
| 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) {} |