Ej1 api migration in EJ2 JavaScript Tab control

2 May 202318 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

$(“#tab”).ejTab({
  allowKeyboardNavigation: false
});
Not Applicable
Localization Not Applicable Property: locale

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

$(“#tab”).ejTab({
  enableRTL: false
});
Property: enableRtl

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

AjaxSettings

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

$(“#tab”).ejTab({
  ajaxSettings: { type: ‘GET’ }
});
Not Applicable
Asynchronous Property: ajaxSettings.async

$(“#tab”).ejTab({
  ajaxSettings: { async: true }
});
Not Applicable
Browser Cache Property: ajaxSettings.cache

$(“#tab”).ejTab({
  ajaxSettings: { cache: false }
});
Not Applicable
Request type Property: ajaxSettings.contentType

$(“#tab”).ejTab({
  ajaxSettings: { contentType: “html” }
});
Not Applicable
Data Property: ajaxSettings.data

$(“#tab”).ejTab({
  ajaxSettings: { data: {} }
});
Not Applicable
Response type Property: ajaxSettings.dataType

$(“#tab”).ejTab({
  ajaxSettings: { dataType: “html” }
});
Not Applicable
HTTP request type Property: ajaxSettings.type

$(“#tab”).ejTab({
  ajaxSettings: { type: ‘GET’ }
});
Not Applicable
AjaxBeforeLoad Event: ajaxBeforeLoad

$(“#tab”).ejTab({
  ajaxBeforeLoad: function(args) {}
});
Not Applicable
AjaxError Event: ajaxError

$(“#tab”).ejTab({
  ajaxError: function(args) {}
});
Not Applicable
AjaxLoad Event: ajaxLoad

$(“#tab”).ejTab({
  ajaxLoad: function(args) {}
});
Not Applicable
AjaxSuccess Event: ajaxSuccess

$(“#tab”).ejTab({
  ajaxSuccess: function(args) {}
});
Not Applicable

Animation

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

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

$(“#tab”).ejTab({
  enableAnimation: false
});
Not Applicable
Previous animation Not Applicable Property: animation.prev

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

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

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

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

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

$(“#tab”).ejTab({
  headerPosition: “Bottom”
});
Property: headerPlacement

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

$(“#tab”).ejTab({
  headerSize: “100px”
});
Not Applicable
OverflowModes Not Applicable Property: overflowMode

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

$(“#tab”).ejTab({
  enableTabScroll: false
});
Not Applicable

Items

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

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

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

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

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

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

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

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

$(“#tab”).ejTab();
var tabObj = $(“#tab”).data(“ejTab”);
tabObj.getItemsCount();
Not Applicable
Add Items Method: addItem(url, displayLabel, index, cssClass, id)

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

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

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

$(“#tab”).ejTab({
  itemAdd: function(args) {}
});
Event: added

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

$(“#tab”).ejTab();
var tabObj = $(“#tab”).data(“ejTab”);
tabObj.removeItem(1);
Method: removeTab(index)

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

$(“#tab”).ejTab({
  beforeItemRemove: function(args) {}
});
Event: removing

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

$(“#tab”).ejTab({
  itemRemove: function(args) {}
});
Event: removed

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

$(“#tab”).ejTab({
  selectedItemIndex : 1
});
Property: selectedItem

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

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

$(“#tab”).ejTab({
  beforeActive: function(args) {}
});
Event: selecting

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

$(“#tab”).ejTab({
  itemActive: function(args) {}
});
Event: selected

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

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

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

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

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

$(“#tab”).ejTab();
var tabObj = $(“#tab”).data(“ejTab”);
tabObj.hideItem(1);
Method: hideTab(index, true)

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

$(“#tab”).ejTab();
var tabObj = $(“#tab”).data(“ejTab”);
tabObj.showItem(1);
Method: hideTab(index, false)

var tab = new ej.navigations.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

$(“#tab”).ejTab({
  collapsible: true
});
Not Applicable
Custom class Property: cssClass

$(“#tab”).ejTab({
  cssClass: ‘customClass’
});
Property: cssClass

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

$(“#tab”).ejTab({
  enabled: false
});
Method: disable(false)

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

$(“#tab”).ejTab({
  enablePersistence: false
});
Property: enablePersistence

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

$(“#tab”).ejTab({
  events: “click”
});
Not Applicable
Height Property: height

$(“#tab”).ejTab({
  height: “100%”
});
Property: height

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

$(“#tab”).ejTab({
  heightAdjustMode : ej.Tab.HeightAdjustMode.Content
});
Property: heightAdjustMode

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

$(“#tab”).ejTab({
  htmlAttributes: { class: “my-class” }
});
Not Applicable
ID prefix Property: idPrefix

$(“#tab”).ejTab({
  idPrefix: “ej-tab-“
});
Not Applicable
ShowCloseButton Property: showCloseButton

$(“#tab”).ejTab({
  showCloseButton : true
});
Property: showCloseButton

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

$(“#tab”).ejTab({
  showReloadIcon : true
});
Not Applicable
ShowRoundedCorner Property: showRoundedCorner

$(“#tab”).ejTab({
  showRoundedCorner : true
});
Not Applicable
Width Property: width

$(“#tab”).ejTab({
  width: “100%”
});
Property: width

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

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

$(“#tab”).ejTab();
var tabObj = $(“#tab”).data(“ejTab”);
tabObj.disable();
Method: disable(true)

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

$(“#tab”).ejTab();
var tabObj = $(“#tab”).data(“ejTab”);
tabObj.enable();
Method: disable(false)

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

$(“#tab”).ejTab();
var tabObj = $(“#tab”).data(“ejTab”);
tabObj.hide();
Not Applicable
Refresh Not Applicable Method: refresh()

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

$(“#tab”).ejTab();
var tabObj = $(“#tab”).data(“ejTab”);
tabObj.show();
Not Applicable
Created Event: create

$(“#tab”).ejTab({
  create: function(args) {}
});
Event: created

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

$(“#tab”).ejTab({
  destroy: function(args) {}
});
Event: destroyed

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