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