Ej1 api migration in React Tab component

27 Feb 20237 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’ } };} |

Header

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