This article describes the API migration process of Dialog control 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) {} |