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 allowKeyboardNavigation={true}></EJ.Dialog> |
No separate Property for enable/disable keyboard navigation. Its enabled by default. |
Localization | Property : locale<EJ.Dialog locale="es-ES"></EJ.Dialog> |
Property : locale<DialogComponent locale="es-ES" /> |
Right to left | Property: enableRTL<EJ.Dialog enableRTL={true}></EJ.Dialog> |
Property: enableRTL<DialogComponent enableRtl={true} /> |
Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
---|---|---|
Header Content | Property : title<EJ.Dialog title="EJ1 Dialog header"></EJ.Dialog> Method : setTitle $(‘#dialog’).ejDialog(‘setTitle’, ‘EJ1 Dialog Header’); |
Property : header<DialogComponent header='EJ2 Dialog' /> |
close button | Property : actionButtons<EJ.Dialog actionButtons={this.actionbuttons}></EJ.Dialog> actionbuttons: any; constructor() { this.actionbuttons = ['close'];} |
Property : showCloseIcon<DialogComponent showCloseIcon={true} /> |
Event triggers when click on action buttons | Event: actionButtonClick<EJ.Dialog actionButtons={this.actionbuttons}actionButtonClick={this.buttonAction}></EJ.Dialog> actionbuttons: any; constructor() { this.actionbuttons = ['close'];, buttonAction(event) {} } |
Not Applicable |
Minimize | Property : actionButtons<EJ.Dialog actionButtons={this.actionbuttons}></EJ.Dialog> actionbuttons: any; constructor() { this.actionbuttons = ['minimize'];} |
Not Applicable |
Maximize | Property : actionButtons<EJ.Dialog actionButtons={this.actionbuttons}></EJ.Dialog> actionbuttons: any; constructor() { this.actionbuttons = ['maximize'];} |
Not Applicable |
Collapse /Expand | Property : actionButtons Method : collapse(), expand () <EJ.Dialog actionButtons={this.actionbuttons}></EJ.Dialog> actionbuttons: any; constructor() { this.actionbuttons = ['collapsible'];} $(‘#dialog’).ejDialog(‘collapse’); $(‘#dialog’).ejDialog(‘expand’) |
Not Applicable |
Event triggers when expanding the collapsed dialog | Event: expand<EJ.Dialog id="dialog" expand={this.expandAction}></EJ.Dialog> expandAction(event) {}) |
Not Applicable |
Event triggers when collapsing the expanded dialog | Event: collapse<EJ.Dialog id="dialog" collapse={this.collapseAction}></EJ.Dialog> collapseAction(event) {}) |
Not Applicable |
Pin | Property : actionButtons<EJ.Dialog actionButtons={this.actionbuttons}></EJ.Dialog> actionbuttons: any; constructor() { this.actionbuttons = ['pin'];} |
Not Applicable |
Header visibility | Property: showHeader<EJ.Dialog showHeader={true}></EJ.Dialog> |
Not Applicable |
Close on escape key press | Property : closeOnEscape<EJ.Dialog closeOnEscape={true}></EJ.Dialog> |
Property : closeOnEscape<DialogComponent closeOnEscape={true} /> |
Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
---|---|---|
Footer Content | Property :footerTemplateId<EJ.Dialog footerTemplateId='sample'></EJ.Dialog> |
Property: footerTemplate<DialogComponent footerTemplate= {this.footerTemplate} /> footerTemplate { <button>Submit</button> } |
Footer action buttons | Not applicable | Property : buttons<DialogComponent buttons={this.dialogbuttons} /> constructor(props: {}) { this.dialogbuttons = [{ click: this.dlgButtonClick, buttonModel: {content: 'OK', isPrimary: true} }] |
Footer visibility | Property : showFooter<EJ.Dialog showFooter={true}></EJ.Dialog> |
Not Applicable |
Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
---|---|---|
Dialog content | Method : setContent<EJ.Dialog id="basicDialog"></EJ.Dialog> $(‘#basicDialog’).ejDialog(‘setContent’, ‘Dialog Content’) |
Property : content<DialogComponent content= 'Dialog content' /> |
Loading content using AJAX request | Property : contentType, contentUrl<EJ.Dialog contentType="ajax" contentType=''></EJ.Dialog> |
Not Applicable |
Event triggers after the dialog content loaded in DOM | Event: contentLoad<EJ.Dialog contentLoad={this.onLoad}></EJ.Dialog> onLoad(event) {} |
Not Applicable |
Event trigger when fails to load ajax content | Event: ajaxError<EJ.Dialog ajaxError={this.onAjaxError}></EJ.Dialog> onAjaxError(event) {} |
Not Applicable |
Event trigger when load ajax content successfully | Event: ajaxSuccess<EJ.Dialog ajaxSuccess={this.onAjaxSuccess}></EJ.Dialog> onAjaxSuccess(event) {} |
Not Applicable |
Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
---|---|---|
Enabling Animation | Property : enableAnimation<EJ.Dialog enableAnimation={true}></EJ.Dialog> |
Not Applicable |
Animation effects | Property : animation.show.effect<EJ.Dialog animation={this.animation}></EJ.Dialog> animation: object = { show: { effect: 'slide'} }; |
Property : animationSettings.effect<DialogComponent animation={this.animationSettings} /> private animationSettings: Object; constructor(props: {}) { this.animationSettings = { effect: 'Zoom' } } |
Animation duration | Property: animation.show.duration<EJ.Dialog animation={this.animation}></EJ.Dialog> animation: object = { show: { effect: 'slide', duration: 500 } }; |
Property : animationSettings.duration<DialogComponent animation={this.animationSettings} /> private animationSettings: Object; constructor(props: {}) { this.animationSettings = { effect: 'Zoom', duration: 500 } } |
Animation delay | Not applicable | Property: animationSettings.delay<DialogComponent animation={this.animationSettings} /> private animationSettings: Object; constructor(props: {}) { this.animationSettings = { effect: 'Zoom', duration: 500, delay: 500 } } |
Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
---|---|---|
Draggable dialog | Property : allowDraggable<EJ.Dialog allowDraggable={true}></EJ.Dialog> |
Property : allowDragging<DialogComponent allowDragging= {true} /> |
Event triggers when the user drags the dialog | Event: drag<EJ.Dialog drag={this.onDrag }></EJ.Dialog> onDrag(event) {} |
Event: drag<DialogComponent drag= {this.onDrag} /> private onDrag() {} |
Event triggers when the start to drag the dialog | Event: dragStart <EJ.Dialog dragStart={this.onDragStart }></EJ.Dialog> onDragStart(event) {} |
Event: dragStart <DialogComponent dragStart= {this.onDragStart} /> private onDragStart() {} |
Event triggers when the stops to drag the dialog | Event: dragStop<EJ.Dialog dragStop={this.onDragStop }></EJ.Dialog> onDragStop(event) {} |
Event: dragStop<DialogComponent dragStop= {this.onDragStop} /> private onDragStop() {} |
Resizing dialog | Property : enableResize<EJ.Dialog enableResize={true}></EJ.Dialog> |
Not applicable |
Event triggers when resizing the dialog | Event: resize <EJ.Dialog resize={this.onReSize }></EJ.Dialog> onReSize(event) {} |
Not Applicable |
Event triggers when starts to resizing the dialog | Event: resizeStart<EJ.Dialog resizeStart={this.onResizeStart }></EJ.Dialog> onResizeStart(event) {} |
Not Applicable |
Event triggers when the stops to resizing the dialog | Event: resizeStop<EJ.Dialog resizeStop={this.onResizeStop }></EJ.Dialog> onResizeStop(event) {} |
Not Applicable |
Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
---|---|---|
Target element to append dialog in document | Property : target <EJ.Dialog target='#dialogTarget'></EJ.Dialog> |
Property: target<DialogComponent target='#dialogTarget' /> |
Element for draggable area | Property : containment<EJ.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 position={this.dialogPosition}></EJ.Dialog> dialogPosition: any = { position: { X: 300, Y: 100 } } |
Property : position<DialogComponent position={this.dialogPosition} /> private dialogPosition: object { position: {X:300, Y:100} } |
positioning dialog using position values | Not Applicable | Property: position<DialogComponent position={this.dialogPosition} /> private dialogPosition: object { position: {X: 'center', Y: 'center'} } |
Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
---|---|---|
Render dialog in visible/hidden state | Property: showOnInit<EJ.Dialog showOnInit={true}></EJ.Dialog> |
Property: visible<DialogComponent visible= {this.state.hideDialog} /> constructor(props: {}) { this.setState({ hideDialog: false }) }; |
Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
---|---|---|
Render modal dialog | Property : enableModal<EJ.Dialog enableModal={true}></EJ.Dialog> |
Property : isModal<DialogComponent isModal= {true} /> |
Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
---|---|---|
Sets the tooltip for dialog buttons | Property : tooltip<EJ.Dialog tooltip={this.tooltip}></EJ.Dialog> 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 enabled={false}></EJ.Dialog> |
Not Applicable |
Enable/ Disable page scrolling | Property: backgroundScroll<EJ.Dialog backgroundScroll={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 enablePersistence={true}></EJ.Dialog> |
Property : enablePersistence <DialogComponent enablePersistence= {true} /> |
Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
---|---|---|
Adjusting Height | Property : height <EJ.Dialog height={400}></EJ.Dialog> |
Property : height <DialogComponent height= '50%' /> |
Adjusting width | Property: width <EJ.Dialog width={400}></EJ.Dialog> |
Property : width <DialogComponent width= '50%' /> |
Adding custom class | Property: cssClass <EJ.Dialog cssClass='custom-class'></EJ.Dialog> |
Property: cssClass <DialogComponent cssClass='custom-class' /> |
Adding zIndex | Property: zIndex <EJ.Dialog zIndex={2000}></EJ.Dialog> |
Property: zIndex <DialogComponent zIndex='2000' /> |
Maximum height | Property: maxHeight <EJ.Dialog maxHeight={600}></EJ.Dialog> |
Not Applicable |
Maximum width | Property: maxWidth <EJ.Dialog maxWidth={600}></EJ.Dialog> |
Not Applicable |
Minimum height | Property: minHeight <EJ.Dialog minHeight={300}></EJ.Dialog> |
Not Applicable |
Minimum width | Property: minWidth <EJ.Dialog minWidth={300}></EJ.Dialog> |
Not Applicable |
Adding html attributes | Property: htmlAttributes <EJ.Dialog htmlAttributes={this.htmlAttributes}></EJ.Dialog> htmlAttributes: object { class: 'my-class' } |
Not Applicable |
Custom icon in the header | Property: faviconCSS <EJ.Dialog faviconCSS='custom-icon'></EJ.Dialog> |
Not Applicable |
Rounded corner appearance | Property: showRoundedCorner <EJ.Dialog showRoundedCorner={true}></EJ.Dialog> |
Not Applicable |
Make control flexible for mobile view | Property: isResponsive <EJ.Dialog isResponsive={true}></EJ.Dialog> |
Not Applicable |
Close the Dialog | Method: close() <EJ.Dialog id ='dialog'></EJ.Dialog> $(‘#dialog’).ejDialog(‘close’) |
Method : hide() <DialogComponent id='dialog' ref={dialog => this.dialogInstance = dialog /> constructor(props: {}) { this.dialogInstance.hide(); } |
Event triggers before the dialog closes | Event: beforeClose <EJ.Dialog beforeClose={this.onBeforeClose}></EJ.Dialog> onBeforeClose (event) {} |
Event: beforeClose <DialogComponent beforeClose= {this.onBeforeClose.bind(this)} /> private onBeforeClose() {} |
Event triggers when the dialog closes | Event: close <EJ.Dialog close={this.onClose}></EJ.Dialog> onClose (event) {} |
Event: close <DialogComponent close= {this.onClose.bind(this)} /> private onClose() {} |
Destroy the control | Method: destroy() <EJ.Dialog id ='dialog'></EJ.Dialog> $(‘#dialog’).ejDialog(‘destroy’) |
Method: destroy() <DialogComponent id='dialog' ref={dialog => this.dialogInstance = dialog /> constructor(props: {}) { this.dialogInstance.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() <DialogComponent id='dialog' ref={dialog => this.dialogInstance = dialog /> constructor(props: {}) { this.dialogInstance.show(); } |
Event trigger before the dialog opens | Event: beforeOpen <EJ.Dialog beforeOpen={this.onBeforeOpen}></EJ.Dialog> onBeforeOpen (event) {} |
Event: beforeOpen <DialogComponent beforeOpen= {this.onBeforeOpen.bind(this)} /> private onBeforeOpen() {} |
Event triggers when the opens the dialog | Event: open <EJ.Dialog open={this.onOpen}></EJ.Dialog> onOpen (event) {} |
Event: open <DialogComponent open= {this.onOpen.bind(this)} /> private onOpen() {} |
Refresh the dialog | Method: refresh() <EJ.Dialog id ='dialog'></EJ.Dialog> $(‘#dialog’).ejDialog(‘refresh’) |
Method : refreshPosition() <DialogComponent id='dialog' ref={dialog => this.dialogInstance = dialog /> constructor(props: {}) { this.dialogInstance.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 create={this.onCreate}></EJ.Dialog> onCreate (event) {} |
Event : created <DialogComponent created= {this.onCreated.bind(this)} /> private onCreated() {} |
Event triggers when the control destroyed successfully | Event: destroy <EJ.Dialog destroy={this.onDestroy}></EJ.Dialog> onDestroy (event) {} |
Not Applicable |
Event triggers on clicking on modal dialog overlay | Not Applicable | Event : overlayClick <DialogComponent overlayClick= {this.onOverlayClick.bind(this)} /> private onOverlayClick() {} |