This article describes the API migration process of Tab 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.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 > |
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 |
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 |
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); } |
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) { } |