Contents
- Accessibility
- AjaxSettings
- Animation
- Header
- Items
- Common
Having trouble getting help?
Contact Support
Contact Support
Migration from Essential® JS 1
8 Dec 202415 minutes to read
This article describes the API migration process of Tab component from Essential® JS 1 to Essential® JS 2.
Accessibility
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
---|---|---|
Keyboard Navigation |
Property: allow-keyboard-navigation <ej-tab allow-keyboard-navigation="true" /> |
Not Applicable |
Localization | Not Applicable |
Property: locale <ejs-tab locale="en-US" /> |
RTL |
Property: enable-rtl <ej-tab enable-rtl="true" /> |
Property: enableRtl <ejs-tab enableRtl="en-US" /> |
AjaxSettings
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
---|---|---|
Default |
Property: ajax-settings <ej-tab> <e-ajax-settings type="GET" /> </ej-tab> |
Not Applicable |
Asynchronous |
Property: async <ej-tab> <e-ajax-settings async="true" /> </ej-tab> |
Not Applicable |
Browser Cache |
Property: cache <ej-tab> <e-ajax-settings cache="false" /> </ej-tab> |
Not Applicable |
Request type |
Property: contentType <ej-tab> <e-ajax-settings content-type="html" /> </ej-tab> |
Not Applicable |
Data |
Property: data <ej-tab> <e-ajax-settings data="" /> </ej-tab> |
Not Applicable |
Response type |
Property: dataType <ej-tab> <e-ajax-settings data-type="html" /> </ej-tab> |
Not Applicable |
HTTP request type |
Property: type <ej-tab> <e-ajax-settings type="GET" /> </ej-tab> |
Not Applicable |
AjaxBeforeLoad |
Event: ajax-before-load <ej-tab ajax-before-load="onBeforeLoad" /> |
Not Applicable |
AjaxError |
Event: ajax-error <ej-tab ajax-error="onError" /> |
Not Applicable |
AjaxLoad |
Event: ajax-load <ej-tab ajax-load="onError" /> |
Not Applicable |
AjaxSuccess |
Event: ajax-success <ej-tab ajax-success="onSuccess" /> |
Not Applicable |
Animation
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
---|---|---|
Default | Not Applicable |
Property: animation <ejs-tab> <e-tab-animation previous="" next="" /> </ejs-tab> |
EnableAnimation |
Property: enable-animation <ej-tab enable-animation="true" /> |
Not Applicable |
Previous animation | Not Applicable |
Property: prev <ejs-tab> <e-tab-previous /> </ejs-tab> |
Next animation | Not Applicable |
Property: next <ejs-tab> <e-tab-next /> </ejs-tab> |
Duration [prev / next] |
Not Applicable |
Property: duration <ejs-tab> <e-tab-next duration="500" /> </ejs-tab> |
Easing [prev / next] |
Not Applicable |
Property: easing <ejs-tab> <e-tab-next easing="ease-in" /> </ejs-tab> |
Effect [prev / next] |
Not Applicable |
Property: effect <ejs-tab> <e-tab-next effect="SlideLeft" /> </ejs-tab> |
Header
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
---|---|---|
Header position |
Property: header-position <ej-tab header-position="Bottom" /> |
Property: headerPlacement <ejs-tab headerPlacement="Bottom" /> |
Header size |
Property: header-size <ej-tab header-size="50px" /> |
Not Applicable |
OverflowModes | Not Applicable |
Property: overflowMode <ejs-tab overflowMode="Popup" /> |
TabScroll |
Property: enable-tab-scroll <ej-tab enable-tab-scroll="true" /> |
Not Applicable |
Items
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
---|---|---|
Default | Not Applicable |
Property: items <ejs-tab> <e-tab-tabitems /> </ejs-tab> |
Content | Not Applicable |
Property: items[0].content <ejs-tab> <e-tab-tabitems> <e-tab-tabitem content="welcome" /> </e-tab-tabitems> </ejs-tab> |
Custom Class | Not Applicable |
Property: items[0].cssClass <ejs-tab> <e-tab-tabitems> <e-tab-tabitem cssClass="e-custom-class" /> </e-tab-tabitems> </ejs-tab> |
Header | Not Applicable |
Property: items[0].header <ejs-tab> <e-tab-tabitems> <e-tab-tabitem header="@ViewBag.header" /> </e-tab-tabitems> </ejs-tab> |
Icon class | Not Applicable |
Property: items[0].header.iconCss <ejs-tab> <e-tab-tabitems> <e-tab-tabitem> <e-tabitem-header iconCss="e-icon" /> </e-tab-tabitem> </e-tab-tabitems> </ejs-tab> |
Icon position | Not Applicable |
Property: items[0].header.iconPosition <ejs-tab> <e-tab-tabitems> <e-tab-tabitem> <e-tabitem-header iconPosition="Left" /> </e-tab-tabitem> </e-tab-tabitems> </ejs-tab> |
Header text | Not Applicable |
Property: items[0].header.text <ejs-tab> <e-tab-tabitems> <e-tab-tabitem> <e-tabitem-header text="Tab1" /> </e-tab-tabitem> </e-tab-tabitems> </ejs-tab> |
Get items length |
Method: getItemsCount() var tabObj = $(“#tab”).data(“ejTab”); tabObj.getItemsCount(); |
Not Applicable |
Add Items |
Method: addItem(url, displayLabel, index, cssClass, id) var tabObj = $(“#tab”).data(“ejTab”); tabObj.addItem(“#new”, “New Item”, 3, “myClass”, “newItem”); |
Method: addTab(items, index) var tab = document.getElementById(‘ej2Tab’).ej2_instances[0]; tab.addTab([{ header: { text: ‘Tab1’ }, content: ‘contents’ }], 1 ); |
BeforeAdd | Not Applicable |
Event: adding <ejs-tab adding="onAdding" /> |
AfterAdd |
Event: item-add <ej-tab item-add="itemAdd" /> |
Event: added <ejs-tab added="onAdded" /> |
Remove item |
Method: removeItem(index) var tabObj = $(“#tab”).data(“ejTab”); tabObj.removeItem(1); |
Method: removeTab(index) var tab = document.getElementById(‘ej2Tab’).ej2_instances[0]; tab.removeTab(1); |
BeforeRemove |
Event: before-item-remove <ej-tab before-item-remove="beforeItemRemove" /> |
Event: removing <ejs-tab removing="onRemoving" /> |
AfterRemove |
Event: item-remove <ej-tab item-remove="itemRemove" /> |
Event: removed <ejs-tab removed="onRemoved" /> |
SelectedItemIndex |
Property: selected-item-index <ej-tab selected-item-index="0" /> |
Property: selectedItem <ejs-tab selectedItem="0" /> |
Select item | Not Applicable |
Method: select(index) var tab = document.getElementById(‘ej2Tab’).ej2_instances[0]; tab.select(1); |
BeforeActive |
Event: before-active <ej-tab before-active="beforeActive" /> |
Event: selecting <ejs-tab selecting="onSelecting" /> |
AfterActive |
Event: item-active <ej-tab item-active="itemActive" /> |
Event: selected <ejs-tab selected="onSelected" /> |
Disable items |
Property: disabled-item-index <ej-tab disabled-item-index="@ViewBag.itemsIndex" /> |
Not Applicable |
Enable items |
Property: enabled-item-index <ej-tab enabled-item-index="@ViewBag.itemsIndex" /> |
Not Applicable |
Enable/Disable item | Not Applicable |
Property: items[0].disabled <ejs-tab> <e-tab-tabitems> <e-tab-tabitem disabled="true" /> </e-tab-tabitems> </ejs-tab> |
Hide items |
Property: hiddenItemIndex <ej-tab hide-item-index="@ViewBag.itemsIndex" /> |
Not Applicable |
Hide item |
Method: hideItem(index) var tabObj = $(“#tab”).data(“ejTab”); tabObj.hideItem(1); |
Method: hideTab(index, true) var tab = document.getElementById(‘ej2Tab’).ej2_instances[0]; tab.hideTab(1, true); |
Show item |
Method: showItem(index) var tabObj = $(“#tab”).data(“ejTab”); tabObj.showItem(1); |
Method: hideTab(index, false) var tab = document.getElementById(‘ej2Tab’).ej2_instances[0]; tab.hideTab(1, false); |
Common
Behavior | API in Essential® JS 1 | API in Essential® JS 2 |
---|---|---|
Collapse active item |
Property: collapsible <ej-tab collapsible="true" /> |
Not Applicable |
Custom class |
Property: css-class <ej-tab css-class="custom-class" /> |
Property: cssClass <ejs-tab cssClass="custom-class" /> |
Enabled |
Property: enabled <ej-tab enabled="false" /> |
Method: disable(false) var tab = document.getElementById(‘ej2Tab’).ej2_instances[0]; tab.disable(false); |
Persistence |
Property: enable-persistence <ej-tab enable-persistence="100%" /> |
Property: enablePersistence <ejs-tab enablePersistence="true" /> |
Events |
Property: events <ej-tab events="click" /> |
Not Applicable |
Height |
Property: height <ej-tab height="100%" /> |
Property: height <ejs-tab height="100%" /> |
HeightAdjustMode |
Property: height-adjust-mode <ej-tab height-adjust-mode="Content" /> |
Property: heightAdjustMode <ejs-tab heightAdjustMode="Content" /> |
HTML Attributes |
Property: html-attributes <ej-tab html-attributes="" /> |
Not Applicable |
ID prefix |
Property: id-prefix <ej-tab id-prefix="ej-tab-" /> |
Not Applicable |
ShowCloseButton |
Property: show-close-button <ej-tab show-close-button="true" /> |
Property: showCloseButton <ejs-tab showCloseButton="true" /> |
showReloadIcon |
Property: show-reload-icon <ej-tab show-reload-icon="true" /> |
Not Applicable |
ShowRoundedCorner |
Property: show-rounded-corner <ej-tab show-rounded-corner="true" /> |
Not Applicable |
Width |
Property: width <ej-tab width="100%" /> |
Property: width <ejs-tab width="100%" /> |
Destroy | Not Applicable |
Method: destroy() var tab = document.getElementById(‘ej2Tab’).ej2_instances[0]; tab.destroy(); |
Disable Tab |
Method: disable() var tabObj = $(“#tab”).data(“ejTab”); tabObj.disable(); |
Method: disable(true) var tab = document.getElementById(‘ej2Tab’).ej2_instances[0]; tab.disable(true); |
Enable Tab |
Method: enable() var tabObj = $(“#tab”).data(“ejTab”); tabObj.enable(); |
Method: disable(false) var tab = document.getElementById(‘ej2Tab’).ej2_instances[0]; tab.disable(false); |
Hide Tab |
Method: hide() var tabObj = $(“#tab”).data(“ejTab”); tabObj.hide(); |
Not Applicable |
Refresh | Not Applicable |
Method: refresh() var tab = document.getElementById(‘ej2Tab’).ej2_instances[0]; tab.refresh(); |
Show Tab |
Method: show() var tabObj = $(“#tab”).data(“ejTab”); tabObj.show(); |
Not Applicable |
Created |
Event: create <ej-tab create="onCreate" /> |
Event: created <ejs-tab created="onCreated" /> |
Destroyed |
Event: destroy <ej-tab destroy="onDestroy" /> |
Event: destroyed <ejs-tab destroyed="onDestroyed" /> |