Ej1 api migration in EJ2 TypeScript Tab control

2 May 202319 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: allowKeyboardNavigation

var tab = new ej.Tab($(“#tab”), {
  allowKeyboardNavigation: false
});
Not Applicable
Localization Not Applicable Property: locale

let tab: Tab = new Tab({
  locale: ‘en-US’
});
tab.appendTo(‘#ej2Tab’);
RTL Property: enableRTL

var tab = new ej.Tab($(“#tab”), {
  enableRTL: false
});
Property: enableRtl

let tab: Tab = new Tab({
  enableRtl: false
});
tab.appendTo(‘#ej2Tab’);

AjaxSettings

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: ajaxSettings

var tab = new ej.Tab($(“#tab”), {
  ajaxSettings: { type: ‘GET’ }
});
Not Applicable
Asynchronous Property: ajaxSettings.async

var tab = new ej.Tab($(“#tab”), {
  ajaxSettings: { async: true }
});
Not Applicable
Browser Cache Property: ajaxSettings.cache

var tab = new ej.Tab($(“#tab”), {
  ajaxSettings: { cache: false }
});
Not Applicable
Request type Property: ajaxSettings.contentType

var tab = new ej.Tab($(“#tab”), {
  ajaxSettings: { contentType: “html” }
});
Not Applicable
Data Property: ajaxSettings.data

var tab = new ej.Tab($(“#tab”), {
  ajaxSettings: { data: {} }
});
Not Applicable
Response type Property: ajaxSettings.dataType

var tab = new ej.Tab($(“#tab”), {
  ajaxSettings: { dataType: “html” }
});
Not Applicable
HTTP request type Property: ajaxSettings.type

var tab = new ej.Tab($(“#tab”), {
  ajaxSettings: { type: ‘GET’ }
});
Not Applicable
AjaxBeforeLoad Event: ajaxBeforeLoad

var tab = new ej.Tab($(“#tab”), {
  ajaxBeforeLoad: function(args) {}
});
Not Applicable
AjaxError Event: ajaxError

var tab = new ej.Tab($(“#tab”), {
  ajaxError: function(args) {}
});
Not Applicable
AjaxLoad Event: ajaxLoad

var tab = new ej.Tab($(“#tab”), {
  ajaxLoad: function(args) {}
});
Not Applicable
AjaxSuccess Event: ajaxSuccess

var tab = new ej.Tab($(“#tab”), {
  ajaxSuccess: function(args) {}
});
Not Applicable

Animation

Behavior API in Essential JS 1 API in Essential JS 2
Default Not Applicable Property: animation

let tab: Tab = new Tab({
  animation: { prev: { }, next: { } }
});
tab.appendTo(‘#ej2Tab’);
EnableAnimation Property: enableAnimation

var tab = new ej.Tab($(“#tab”), {
  enableAnimation: false
});
Not Applicable
Previous animation Not Applicable Property: animation.prev

let tab: Tab = new Tab({
  animation: {
    prev: {
      duration: 400,
      easing: ‘ease-in’,
      effect: ‘SlideLeft’
    }
  }
});
tab.appendTo(‘#ej2Tab’);
Next animation Not Applicable Property: animation.next

let tab: Tab = new Tab({
  animation: {
    next: {
      duration: 400,
      easing: ‘ease-in’,
      effect: ‘SlideLeft’
    }
  }
});
tab.appendTo(‘#ej2Tab’);
Duration
[prev / next]		 Not Applicable Property: animation.next.duration

let tab: Tab = new Tab({
  animation: {
    prev: { duration: 400 }
  }
});
tab.appendTo(‘#ej2Tab’);
Easing
[prev / next]		 Not Applicable Property: animation.next.easing

let tab: Tab = new Tab({
  animation: {
    prev: { easing: ‘ease-in’ }
  }
});
tab.appendTo(‘#ej2Tab’);
Effect
[prev / next]		 Not Applicable Property: animation.next.effect

let tab: Tab = new Tab({
  animation: {
    prev: { effect: ‘SlideLeft’ }
  }
});
tab.appendTo(‘#ej2Tab’);
Behavior API in Essential JS 1 API in Essential JS 2
Header position Property: headerPosition

var tab = new ej.Tab($(“#tab”), {
  headerPosition: “Bottom”
});
Property: headerPlacement

let tab: Tab = new Tab({
  headerPlacement: ‘Bottom’
});
tab.appendTo(‘#ej2Tab’);
Header size Property: headerSize

var tab = new ej.Tab($(“#tab”), {
  headerSize: “100px”
});
Not Applicable
OverflowModes Not Applicable Property: overflowMode

let tab: Tab = new Tab({
  overflowMode: ‘Popup’
});
tab.appendTo(‘#ej2Tab’);
TabScroll Property: enableTabScroll

var tab = new ej.Tab($(“#tab”), {
  enableTabScroll: false
});
Not Applicable

Items

Behavior API in Essential JS 1 API in Essential JS 2
Default Not Applicable Property: items

let tab: Tab = new Tab({
  items: []
});
tab.appendTo(‘#ej2Tab’);
Content Not Applicable Property: items[0].content

let tab: Tab = new Tab({
  items: [ {
   content: ‘content1’
  } ]
});
tab.appendTo(‘#ej2Tab’);
Custom Class Not Applicable Property: items[0].cssClass

let tab: Tab = new Tab({
  items: [ {
   cssClass: ‘customClass’
  } ]
});
tab.appendTo(‘#ej2Tab’);
Header Not Applicable Property: items[0].header

let tab: Tab = new Tab({
  items: [ {
   header: { }
  } ]
});
tab.appendTo(‘#ej2Tab’);
Icon class Not Applicable Property: items[0].header.iconCss

let tab: Tab = new Tab({
  items: [ {
   header: { iconCss: ‘e-icon’ }
  } ]
});
tab.appendTo(‘#ej2Tab’);
Icon position Not Applicable Property: items[0].header.iconPosition

let tab: Tab = new Tab({
  items: [ {
   header: { iconPosition: ‘Left’ }
  } ]
});
tab.appendTo(‘#ej2Tab’);
Header text Not Applicable Property: items[0].header.text

let tab: Tab = new Tab({
  items: [ {
   header: { text: ‘Tab1’ }
  } ]
});
tab.appendTo(‘#ej2Tab’);
Get items length Method: getItemsCount()

var tab = new ej.Tab($(“#tab”), {});
tabObj.getItemsCount();
Not Applicable
Add Items Method: addItem(url, displayLabel, index, cssClass, id)

var tab = new ej.Tab($(“#tab”), {});
tabObj.addItem(“#new”, “New Item”, 3, “myClass”, “newItem”);
Method: addTab(items, index)

let tab: Tab = new Tab();
tab.appendTo(‘#ej2Tab’);
tab.addTab([{
  header: { text: ‘Tab1’ },
  content: ‘contents’ }], 1
);
BeforeAdd Not Applicable Event: adding

let tab: Tab = new Tab({
  adding: function(e: Event): void { }
});
tab.appendTo(‘#ej2Tab’);
AfterAdd Event: itemAdd

var tab = new ej.Tab($(“#tab”), {
  itemAdd: function(args) {}
});
Event: added

let tab: Tab = new Tab({
  added: function(e: Event): void { }
});
tab.appendTo(‘#ej2Tab’);
Remove item Method: removeItem(index)

var tab = new ej.Tab($(“#tab”), {});
tabObj.removeItem(1);
Method: removeTab(index)

let tab: Tab = new Tab();
tab.appendTo(‘#ej2Tab’);
tab.removeTab(1);
BeforeRemove Event: beforeItemRemove

var tab = new ej.Tab($(“#tab”), {
  beforeItemRemove: function(args) {}
});
Event: removing

let tab: Tab = new Tab({
  removing: function(e: RemoveEventArgs): void { }
});
tab.appendTo(‘#ej2Tab’);
AfterRemove Event: itemRemove

var tab = new ej.Tab($(“#tab”), {
  itemRemove: function(args) {}
});
Event: removed

let tab: Tab = new Tab({
  removed: function(e: RemoveEventArgs): void { }
});
tab.appendTo(‘#ej2Tab’);
SelectedItemIndex Property: selectedItemIndex

var tab = new ej.Tab($(“#tab”), {
  selectedItemIndex : 1
});
Property: selectedItem

let tab: Tab = new Tab({
  selectedItem: 0
});
tab.appendTo(‘#ej2Tab’);
Select item Not Applicable Method: select(index)

let tab: Tab = new Tab();
tab.appendTo(‘#ej2Tab’);
tab.select(1);
BeforeActive Event: beforeActive

var tab = new ej.Tab($(“#tab”), {
  beforeActive: function(args) {}
});
Event: selecting

let tab: Tab = new Tab({
  selecting: function(e: SelectEventArgs): void { }
});
tab.appendTo(‘#ej2Tab’);
AfterActive Event: itemActive

var tab = new ej.Tab($(“#tab”), {
  itemActive: function(args) {}
});
Event: selected

let tab: Tab = new Tab({
  selected: function(e: SelectEventArgs): void { }
});
tab.appendTo(‘#ej2Tab’);
Disable items Property: disabledItemIndex

var tab = new ej.Tab($(“#tab”), {
  disabledItemIndex: [1, 2]
});
Not Applicable
Enable items Property: enabledItemIndex

var tab = new ej.Tab($(“#tab”), {
  enabledItemIndex: [1, 2]
});
Not Applicable
Enable/Disable item Not Applicable Property: items[0].disabled

let tab: Tab = new Tab({
  items: [ {
   disabled: true
  } ]
});
tab.appendTo(‘#ej2Tab’);
Hide items Property: hiddenItemIndex

var tab = new ej.Tab($(“#tab”), {
  hiddenItemIndex: [1, 2]
});
Not Applicable
Hide item Method: hideItem(index)

var tab = new ej.Tab($(“#tab”), {});
tabObj.hideItem(1);
Method: hideTab(index, true)

let tab: Tab = new Tab();
tab.appendTo(‘#ej2Tab’);
tab.hideTab(1, true);
Show item Method: showItem(index)

var tab = new ej.Tab($(“#tab”), {});
tabObj.showItem(1);
Method: hideTab(index, false)

let tab: Tab = new Tab();
tab.appendTo(‘#ej2Tab’);
tab.hideTab(1, false);

Common

Behavior API in Essential JS 1 API in Essential JS 2
Collapse active item Property: collapsible

var tab = new ej.Tab($(“#tab”), {
  collapsible: true
});
Not Applicable
Custom class Property: cssClass

var tab = new ej.Tab($(“#tab”), {
  cssClass: ‘customClass’
});
Property: cssClass

let tab: Tab = new Tab({
  cssClass: ‘customClass’
});
tab.appendTo(‘#ej2Tab’);
Enabled Property: enabled

var tab = new ej.Tab($(“#tab”), {
  enabled: false
});
Method: disable(false)

let tab: Tab = new Tab();
tab.appendTo(‘#ej2Tab’);
tab.disable(false);
Persistence Property: enablePersistence

var tab = new ej.Tab($(“#tab”), {
  enablePersistence: false
});
Property: enablePersistence

let tab: Tab = new Tab({
  enablePersistence: false
});
tab.appendTo(‘#ej2Tab’);
Events Property: events

var tab = new ej.Tab($(“#tab”), {
  events: “click”
});
Not Applicable
Height Property: height

var tab = new ej.Tab($(“#tab”), {
  height: “100%”
});
Property: height

let tab: Tab = new Tab({
  height: ‘100%’
});
tab.appendTo(‘#ej2Tab’);
HeightAdjustMode Property: heightAdjustMode

var tab = new ej.Tab($(“#tab”), {
  heightAdjustMode : ej.Tab.HeightAdjustMode.Content
});
Property: heightAdjustMode

let tab: Tab = new Tab({
  heightAdjustMode: ‘Content’
});
tab.appendTo(‘#ej2Tab’);
HTML Attributes Property: htmlAttributes

var tab = new ej.Tab($(“#tab”), {
  htmlAttributes: { class: “my-class” }
});
Not Applicable
ID prefix Property: idPrefix

var tab = new ej.Tab($(“#tab”), {
  idPrefix: “ej-tab-“
});
Not Applicable
ShowCloseButton Property: showCloseButton

var tab = new ej.Tab($(“#tab”), {
  showCloseButton : true
});
Property: showCloseButton

let tab: Tab = new Tab({
  showCloseButton: true
});
tab.appendTo(‘#ej2Tab’);
showReloadIcon Property: showReloadIcon

var tab = new ej.Tab($(“#tab”), {
  showReloadIcon : true
});
Not Applicable
ShowRoundedCorner Property: showRoundedCorner

var tab = new ej.Tab($(“#tab”), {
  showRoundedCorner : true
});
Not Applicable
Width Property: width

var tab = new ej.Tab($(“#tab”), {
  width: “100%”
});
Property: width

let tab: Tab = new Tab({
  width: ‘100%’
});
tab.appendTo(‘#ej2Tab’);
Destroy Not Applicable Method: destroy()

let tab: Tab = new Tab();
tab.appendTo(‘#ej2Tab’);
tab.destroy();
Disable Tab Method: disable()

var tab = new ej.Tab($(“#tab”), {});
tabObj.disable();
Method: disable(true)

let tab: Tab = new Tab();
tab.appendTo(‘#ej2Tab’);
tab.disable(true);
Enable Tab Method: enable()

var tab = new ej.Tab($(“#tab”), {});
tabObj.enable();
Method: disable(false)

let tab: Tab = new Tab();
tab.appendTo(‘#ej2Tab’);
tab.disable(false);
Hide Tab Method: hide()

var tab = new ej.Tab($(“#tab”), {});
tabObj.hide();
Not Applicable
Refresh Not Applicable Method: refresh()

let tab: Tab = new Tab();
tab.appendTo(‘#ej2Tab’);
tab.refresh();
Show Tab Method: show()

var tab = new ej.Tab($(“#tab”), {});
tabObj.show();
Not Applicable
Created Event: create

var tab = new ej.Tab($(“#tab”), {
  create: function(args) {}
});
Event: created

let tab: Tab = new Tab({
  created: function(e: Event): void { }
});
tab.appendTo(‘#ej2Tab’);
Destroyed Event: destroy

var tab = new ej.Tab($(“#tab”), {
  destroy: function(args) {}
});
Event: destroyed

let tab: Tab = new Tab({
  destroyed: function(e: Event): void { }
});
tab.appendTo(‘#ej2Tab’);