Search results

Migration from Essential JS 1

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

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

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

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

Tooltip

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