Ej1 api migration in React Dialog component

17 Mar 20259 minutes to read

This article describes the API migration process of Dialog component 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

<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} /> |

Header

| 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} /> |

Footer

| 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 |

Content

| 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 |

Animation

| 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 } }
|

Draggable and resizing

| 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 |

Target

Position

| 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'} }
|

Visibility

| 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 }) }; |

Dialog Mode

| 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. |

Control State

| 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 |

State Maintenance

| 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} /> |

Common

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