React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Migration from Essential JS 1 in React Tabs component

02 Feb 2023 / 9 minutes to read

This article describes the API migration process of Tab 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.Tab id="Tab" allowKeyboardNavigation={false} ></EJ.Tab>		 Not Applicable
Localization Not Applicable Property : locale
<TabComponent id="Tab" locale="fr-BE"></TabComponent >
Right to left Property: enableRTL
<EJ.Tab id="tab" enableRTL={true}></EJ.Tab>		 Property: enableRTL
<TabComponent id='tab' enableRTL={true}> </TabComponent >

AjaxSettings

Behavior Property in Essential JS 1 Property in Essential JS 2
Default Property : ajaxSettings
<EJ.Tab id="tab" ajaxSettings.type="GET"></EJ.Tab>		 Not Applicable
Asynchronous Property : ajaxSettings.async
<EJ.Tab id="tab" ajaxSettings.async={true}></EJ.Tab>		 Not Applicable
Browser Cache Property: ajaxSettings.cache
<EJ.Tab id="tab" ajaxSettings.cache={false}></EJ.Tab>		 Not Applicable
Request type Property : ajaxSettings.contentType
<EJ.Tab id="tab" ajaxSettings.contentType="html "></EJ.Tab>		 Not Applicable
Data Property : ajaxSettings.data
<EJ.Tab id="tab" ajaxSettings.data={ }></EJ.Tab>		 Not Applicable
Response type Property : ajaxSettings.dataType
<EJ.Tab id="tab" ajaxSettings.dataType="html"></EJ.Tab>		 Not Applicable
HTTP request type Property: ajaxSettings.type
<EJ.Tab id="tab" ajaxSettings.type="GET"></EJ.Tab>		 Not Applicable
AjaxBeforeLoad Event: ajaxBeforeLoad
<EJ.Tab id='tab' ajaxBeforeLoad={this.onajaxBeforeLoad}></EJ.Tab>

onajaxBeforeLoad (event){ }		 Not Applicable
AjaxError Event: AjaxError
<EJ.Tab id='tab' ajaxError={this.onajaxError}></EJ.Tab>

onajaxError (event){ }		 Not Applicable
AjaxLoad Event: ajaxLoad
<EJ.Tab id='tab' ajaxLoad={this.onajaxLoad}></EJ.Tab>

onajaxLoad (event){ }		 Not Applicable
AjaxSuccess Event: ajaxSuccess
<EJ.Tab id='tab' ajaxSuccess={this.onajaxSuccess} ></EJ.Tab>

onajaxSuccess (event){ }		 Not Applicable

Animation

Behavior Property in Essential JS 1 Property in Essential JS 2
Default Not Applicable Property :animation
<TabComponent id="tab" animation={this.animation}></TabComponent >

constructor(props: {}) {
this.animation = { prev: { }, next: { } };}
EnableAnimation Property :animation
<EJ.Tab id="tab" enableAnimation={false}></EJ.Tab>
 Not Applicable
Previous animation Not Applicable Property :animation.prev
<TabComponent id='tab' animation={this.animation}></TabComponent >

constructor(props: {}) {
this.animation = { prev: { duration: 400,easing: ‘ease-in’, effect: ‘SlideLeft’} };}
Next animation Not Applicable Property :animation.next
<TabComponent id='tab' animation={this.animation}></TabComponent >

constructor(props: {}) {
this.animation = { next: {duration: 400, easing: ‘ease-in’, effect: ‘SlideLeft’ } };}
Duration [prev / next] Not Applicable Property :animation.next.duration
<TabComponent id='tab' animation={this.animation}></TabComponent >

constructor(props: {}) {
this.animation = { prev: { duration: 400 } };}
Easing [expand / collapse] Not Applicable Property :animation.next.easing
<TabComponent id='tab' animation={this.animation}></TabComponent >

constructor(props: {}) {
this.animation = { prev: { easing: ‘ease-in’ } };}
Effect [expand / collapse] Not Applicable Property :animation.next.effect
<TabComponent id='tab' animation={this.animation}></TabComponent >

constructor(props: {}) {
this.animation = { prev: { effect: ‘SlideLeft’ } };}
Behavior Property in Essential JS 1 Property in Essential JS 2
Header position Property : headerPosition
<EJ.Tab id="Tab" headerPosition="Bottom" ></EJ.Tab>		 Property : headerPlacement
<TabComponent id="Tab" headerPlacement="Bottom" ></TabComponent >
Header size Property : headerSize
<EJ.Tab id="Tab" headerSize="100px" ></EJ.Tab>		 Not Applicable
OverflowModes Not Applicable Property: overflowMode
<TabComponent id='tab' overflowMode='Popup'> </TabComponent >
TabScroll Property: enableTabScroll
<EJ.Tab id="Tab" enableTabScroll={false} ></EJ.Tab>		 Not Applicable

Items

Behavior Property in Essential JS 1 Property in Essential JS 2
Default Not Applicable Property : items
<TabComponent id="tab" items={this.items}> </TabComponent >
Content Not Applicable Property : items[0].content
<TabComponent id="tab" items={this.items}> </TabComponent >

constructor(props: {}) {
this.items = {content: ‘Contents’};}
Custom class Not Applicable Property : items[0].cssClass
<TabComponent id="tab" items={this.items}> </TabComponent >

constructor(props: {}) {
this.items = { cssClass: ‘customClass’};}
Header Not Applicable Property : items[0].Header
<TabComponent id="tab" items={this.items}> </TabComponent >

constructor(props: {}) {
this.items = { header: { } };}
Icon class Not Applicable Property : items[0].header.iconCss
<TabComponent id="tab" items={this.items}> </TabComponent >

constructor(props: {}) {
this.items = { header: { iconCss: ‘e-icon’ } };}
Icon position Not Applicable Property : items[0].header.iconPosition
<TabComponent id="tab" items={this.items}> </TabComponent >

constructor(props: {}) {
this.items = { header: { iconPosition: ‘Left’ } };}
Header text Not Applicable Property : items[0].header.text
<TabComponent id="tab" items={this.items}> </TabComponent >

constructor(props: {}) {
this.items = { header: { text: ‘Tab1’ } };}
Get items length Method : getItemsCount()
<EJ.Tab id="Tab"></EJ.Tab>

var obj=$(‘#Tab’).ejTab(‘instance’)
obj.getItemsCount();		 Not Applicable
Add Items Method : addItem(url, displayLabel, index, cssClass, id)
<EJ.Tab id="Tab"></EJ.Tab>

var obj=$(‘#Tab’).ejTab(‘instance’)
obj.addItem(“#new”, “New Item”, 3, “myClass”, “newItem”);		 Method :addTab(items, index)
<TabComponent id="tab" ref = {(scope) => {this.TabObj = scope}}> </TabComponent >

constructor(props: {}) {
this.TabObj.addTab([{header: { text: ‘Tab1’ },content: ‘contents’ }], 1 ); }
BeforeAdd Not Applicable Event: adding
<TabComponent id="tab" adding={onadding.bind(this)}> </TabComponent >

onadding(event){ }
AfterAdd Event: itemAdd
<EJ.Tab id='tab' itemAdd={this.onitemAdd}></EJ.Tab>

onitemAdd(event){ }		 Event: added
<TabComponent id="tab" added={onadded.bind(this)}></TabComponent >

onadded(event){ }
Remove Item Method : removeItem(index)
<EJ.Tab id="Tab" ></EJ.Tab>

var obj=$(‘#Tab’).ejTab(‘instance’)
obj.removeItem(0); }		 Method :addItem(items, index)
<TabComponent id="tab" ref = {(scope) => {this.TabObj = scope}}> </TabComponent >

constructor(props: {}) {
this.TabObj.addItem([{ header: ‘App’, content: ‘text’ }], 0);}
BeforeRemove Event: beforeItemRemove
<EJ.Tab id='tab' beforeItemRemove={this.onbeforeItemRemove}></EJ.Tab>

onbeforeItemRemove(event){ }		 Event: removing
<TabComponent id="tab" removing={onremoving.bind(this)}></TabComponent >

onremoving(event){ }
AfterRemove Event: afterRemove
<EJ.Tab id='tab' itemRemove={this.onitemRemove}></EJ.Tab>

onitemRemove(event){ }		 Event: removed
<TabComponent id="tab" removed={onremoved.bind(this)} ></TabComponent >

onremoved(event){ }
Select item Not Applicable Method :select(index)
<TabComponent id="tab" ref = {(scope) => {this.TabObj = scope}} > </TabComponent >

constructor(props: {}) {
this.TabObj.select(1);}
SelectedItemIndex Property : selectedItemIndex
<EJ.Tab id="tab" selectedItemIndex="1" > </EJ.Tab>		 Property : selectedItem
<TabComponent id="tab" selectedItem="1" > </TabComponent >
BeforeActive Event: beforeActive
<TabComponent id="tab" beforeActive={this.onbeforeActive}></TabComponent >

onbeforeActive(event){ }		 Event: selecting
<TabComponent id="tab" selecting={onselecting.bind(this)}></TabComponent >

onselecting(event){ }
AfterActive Event: itemActive
<TabComponent id="tab" itemActive={this.onitemActive}></TabComponent >

onitemActive(event){ }		 Event: selected
<TabComponent id="tab" selected={onselected.bind(this)}></TabComponent >

onselected(event){ }
Disable items Property : disabledItemIndex
<EJ.Tab id="tab" disabledItemIndex="[1,2]" > </EJ.Tab>		 Not Applicable
Enable items Property : enabledItemIndex
<EJ.Tab id="tab" enabledItemIndex="[1,2]" > </EJ.Tab>		 Not Applicable
Enable/Disable item Not Applicable Property : items[0].disabled
<TabComponent id="tab" items={this.items} > </TabComponent >

this.items = { disabled: true };
Hide items Property : hiddenItemIndex
<EJ.Tab id="tab" hiddenItemIndex="[1,2]" > </EJ.Tab>		 Not Applicable
Hide item Method : hideItem(index)
<EJ.Tab id="Tab"></EJ.Tab>

var obj=$(‘#Tab’).ejTab(‘instance’)
obj.hideItem(1);		 Method :hideTab(index, true)
<TabComponent id="tab" ref = {(scope) => {this.TabObj = scope}}> </TabComponent >

constructor(props: {}) {
this.TabObj.hideTab(1, true); }
Show item Method : showItem(index)
<EJ.Tab id="Tab" ></EJ.Tab>

var obj=$(‘#Tab’).ejTab(‘instance’)
obj.showItem(1);		 Method : hideTab(index, false)
<TabComponent id="tab" ref = {(scope) => {this.TabObj = scope}> </TabComponent >

constructor(props: {}) {
this.TabObj.hideTab(1, false); }

Common

Behavior Property in Essential JS 1 Property in Essential JS 2
Collapse active item Property : collapsible
<EJ.Tab id="tab" collapsible={true}> </EJ.Tab>		 Not Applicable
Custom class Property : cssClass
<EJ.Tab id="tab" cssClass="customClass" > </EJ.Tab>		 Property : cssClass
<TabComponent id="tab" cssClass="customClass" > </TabComponent >
Enabled Property : enabled
<EJ.Tab id="tab" enabled={false}> </EJ.Tab>		 Method : disable(false)
<EJ.Tab id="Tab"></EJ.Tab>

constructor(props: {}) {
this.TabObj.disable(false);
Persistence Property : enablePersistence
<EJ.Tab id="tab" enablePersistence={false} > </EJ.Tab>		 Property : enablePersistence
<TabComponent id="tab" enablePersistence={false} > </TabComponent >
Events Property : events
<EJ.Tab id="tab" events="click" > </EJ.Tab>		 Not Applicable
Height Property : height
<EJ.Tab id="Tab" height="100%" > </EJ.Tab>		 Property : height
<TabComponent id="Tab" height="100%" > </TabComponent >
HeightAdjustMode Property : heightAdjustMode
<EJ.Tab id="Tab" heightAdjustMode="Content" > </EJ.Tab>		 Property : heightAdjustMode
<TabComponent id="Tab" heightAdjustMode="Content" > </TabComponent >
HtmlAttributes Property : htmlAttributes
<EJ.Tab id="Tab" [htmlAttributes]="attributes" > </EJ.Tab>

this.attributes = {class: “my-class”};		 Not Applicable
ID prefix Property : idPrefix
<EJ.Tab id="Tab" [idPrefix]="EJ.Tab-" > </EJ.Tab>		 Not Applicable
ShowCloseButton Property : showCloseButton
<EJ.Tab id="Tab" showCloseButton={true} > </EJ.Tab>		 Property : showCloseButton
<TabComponent id="Tab" {showCloseButton}="true" > </TabComponent >
showReloadIcon Property : showReloadIcon
<EJ.Tab id="Tab" showReloadIcon={true} > </EJ.Tab>		 Not Applicable
ShowRounderCorner Property : showRoundedCorner
<EJ.Tab id="Tab" showRoundedCorner={true} > </EJ.Tab>		 Not Applicable
Destroy Method : destroy()
<EJ.Tab id="Tab"></EJ.Tab>

var obj=$(‘#Tab’).ejTab(‘instance’)
obj.destroy();		 Method : destroy()
<TabComponent id="tab"></TabComponent >

constructor(props: {}) {
this.TabObj.destroy();
Disable Tab Method : disable()
<EJ.Tab id="Tab"></EJ.Tab>

var obj=$(‘#Tab’).ejTab(‘instance’)
obj.disable();		 Method : disable(true)
<TabComponent id="Tab"></TabComponent >

constructor(props: {}) {
this.TabObj.disable(true);
Enable Tab Method : enable()
<EJ.Tab id="Tab"></EJ.Tab>

var obj=$(‘#Tab’).ejTab(‘instance’)
obj.enable();		 Method : disable(false)
<TabComponent id="Tab"></TabComponent >

constructor(props: {}) {
this.TabObj.disable(false);
Show Tab Method : show()
<EJ.Tab id="Tab"></EJ.Tab>

var obj=$(‘#Tab’).ejTab(‘instance’)
obj.show();		 Not Applicable
Hide Tab Method : hide()
<EJ.Tab id="Tab"></EJ.Tab>

var obj=$(‘#Tab’).ejTab(‘instance’)
obj.hide();		 Not Applicable
Refresh Not Applicable Method : refresh()
<TabComponent id="tab"></TabComponent >

constructor(props: {}) {
this.TabObj.refresh(); }
Created Event: create
<EJ.Tab id="tab" create={this.oncreate}></EJ.Tab>

oncreate(event) { }		 Event: created
<TabComponent id="tab" created={oncreated.bind(this)}></TabComponent >

oncreated(event) { }
Destroyed Event: destroy
<EJ.Tab id="tab" destroy={this.ondestroy}></EJ.Tab>

ondestroy(event) { }		 Event: destroyed
<TabComponent id="tab" destroyed={ondestroyed.bind(this)} ></TabComponent >

ondestroyed(event) { }
Previous
Next