Migration from Essential JS 1

17 Feb 202214 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>
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" />