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: AllowKeyboardNavigation

@Html.EJ().Tab(“ejTab”).AllowKeyboardNavigation(true).Render()
Not Applicable
Localization Not Applicable Property: Locale

@Html.EJS().Tab(“ej2Tab”).Locale(“en-US”).Render()
RTL Property: EnableRTL

@Html.EJ().Tab(“ejTab”).EnableRTL(true).Render()
Property: EnableRtl

@Html.EJS().Tab(“ej2Tab”).EnableRtl(true).Render()

AjaxSettings

Behavior API in Essential® JS 1 API in Essential® JS 2
Default Property: AjaxSettings

@Html.EJ().Tab(“ejTab”).AjaxSettings(ajax => {
  ajax.Type(“GET”);
}).Render()
Not Applicable
Asynchronous Property: AjaxSettings.Async

@Html.EJ().Tab(“ejTab”).AjaxSettings(ajax => {
  ajax.Async(true);
}).Render()
Not Applicable
Browser Cache Property: AjaxSettings.Cache

@Html.EJ().Tab(“ejTab”).AjaxSettings(ajax => {
  ajax.Cache(false);
}).Render()
Not Applicable
Request type Property: AjaxSettings.ContentType

@Html.EJ().Tab(“ejTab”).AjaxSettings(ajax => {
  ajax.ContentType(“html”);
}).Render()
Not Applicable
Data Property: AjaxSettings.Data

@Html.EJ().Tab(“ejTab”).AjaxSettings(ajax => {
  ajax.Data(“”);
}).Render()
Not Applicable
Response type Property: AjaxSettings.DataType

@Html.EJ().Tab(“ejTab”).AjaxSettings(ajax => {
  ajax.DataType(“html”);
}).Render()
Not Applicable
HTTP request type Property: AjaxSettings.Type

@Html.EJ().Tab(“ejTab”).AjaxSettings(ajax => {
  ajax.Type(“GET”);
}).Render()
Not Applicable
AjaxBeforeLoad Event: AjaxBeforeLoad

@Html.EJ().Tab(“ejTab”).ClientSideEvents(e => e.AjaxBeforeLoad(“onAjaxBeforeLoad”)).Render()
Not Applicable
AjaxError Event: AjaxError

@Html.EJ().Tab(“ejTab”).ClientSideEvents(e => e.AjaxError(“onAjaxError”)).Render()
Not Applicable
AjaxLoad Event: AjaxLoad

@Html.EJ().Tab(“ejTab”).ClientSideEvents(e => e.AjaxLoad(“onAjaxLoad”)).Render()
Not Applicable
AjaxSuccess Event: AjaxSuccess

@Html.EJ().Tab(“ejTab”).ClientSideEvents(e => e.AjaxSuccess(“onAjaxSuccess”)).Render()
Not Applicable

Animation

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

@Html.EJS().Tab(“ej2Tab”).Animation(anim => {
  anim.Previous(“”).Next(“”);
}).Render()
EnableAnimation Property: EnableAnimation

@Html.EJ().Tab(“ejTab”).EnableAnimation(false).Render()
Not Applicable
Previous animation Not Applicable Property: Animation.Prev

@Html.EJS().Tab(“ej2Tab”).Animation(anim => {
  anim.Previous(new List<TabTabActionSettings>() {
    new TabTabActionSettings() { Effect = “SlideRight” }
  });
}).Render()
Next animation Not Applicable Property: Animation.Next

@Html.EJS().Tab(“ej2Tab”).Animation(anim => {
  anim.Next(new List<TabTabActionSettings>() {
    new TabTabActionSettings() { Effect = “SlideLeft” }
  });
}).Render()
Duration
[prev / next]		 Not Applicable Property: Animation.Next.Duration

@Html.EJS().Tab(“ej2Tab”).Animation(anim => {
  anim.Next(new List<TabTabActionSettings>() {
    new TabTabActionSettings() { Duration = 400 }
  });
}).Render()
Easing
[prev / next]		 Not Applicable Property: Animation.Next.Easing

@Html.EJS().Tab(“ej2Tab”).Animation(anim => {
  anim.Next(new List<TabTabActionSettings>() {
    new TabTabActionSettings() { Easing = “ease-in” }
  });
}).Render()
Effect
[prev / next]		 Not Applicable Property: Animation.Next.Effect

@Html.EJS().Tab(“ej2Tab”).Animation(anim => {
  anim.Next(new List<TabTabActionSettings>() {
    new TabTabActionSettings() { Effect = “SlideRight” }
  });
}).Render()
Behavior API in Essential® JS 1 API in Essential® JS 2
Header position Property: HeaderPosition

@Html.EJ().Tab(“ejTab”).HeaderPosition(HeaderPosition.Top).Render()
Property: HeaderPlacement

@Html.EJS().Tab(“ej2Tab”).HeaderPlacement(Syncfusion.EJ2.Navigations.HeaderPosition.Bottom).Render()
Header size Property: HeaderSize

@Html.EJ().Tab(“ejTab”).HeaderSize(“50px”).Render()
Not Applicable
OverflowModes Not Applicable Property: OverflowMode

@Html.EJS().Tab(“ej2Tab”).OverflowMode(Syncfusion.EJ2.Navigations.OverflowMode.Popup).Render()
TabScroll Property: EnableTabScroll

@Html.EJ().Tab(“ejTab”).EnableTabScroll(false).Render()
Not Applicable

Items

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

@Html.EJS().Tab(“ej2Tab”).Items(item => {
  item.Header(h => { h.Text(“Tab1”); }).Content(“contents”).Add();
}).Render()
Content Not Applicable Property: Items[0].Content

@Html.EJS().Tab(“ej2Tab”).Items(item => {
  item.Content(“contents”).Add();
}).Render()
Custom Class Not Applicable Property: Items[0].CssClass

@Html.EJS().Tab(“ej2Tab”).Items(item => {
  item.CssClass(“customClass”).Add();
}).Render()
Header Not Applicable Property: Items[0].Header

@Html.EJS().Tab(“ej2Tab”).Items(item => {
  item.Header(h => { h.Text(“Tab1”); }).Add();
}).Render()
Icon class Not Applicable Property: Items[0].Header.IconCss

@Html.EJS().Tab(“ej2Tab”).Items(item => {
  item.Header(h => { h.IconCss(“e-icon”); }).Add();
}).Render()
Icon position Not Applicable Property: Items[0].Header.IconPosition

@Html.EJS().Tab(“ej2Tab”).Items(item => {
  item.Header(h => { h.IconPosition(“Left”); }).Add();
}).Render()
Header text Not Applicable Property: Items[0].Header.Text

@Html.EJS().Tab(“ej2Tab”).Items(item => {
  item.Header(h => { h.Text(“Tab1”); }).Add();
}).Render()
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

@Html.EJS().Tab(“ej2Tab”).Adding(“onAdding”).Render()
AfterAdd Event: ItemAdd

@Html.EJ().Tab(“ejTab”).ClientSideEvents(e => e.ItemAdd(“itemAdd”)).Render()
Event: Added

@Html.EJS().Tab(“ej2Tab”).Added(“onAdded”).Render()
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: BeforeItemRemove

@Html.EJ().Tab(“ejTab”).ClientSideEvents(e => e.BeforeItemRemove(“beforeItemRemove”)).Render()
});
Event: Removing

@Html.EJS().Tab(“ej2Tab”).Removing(“onRemoving”).Render()
AfterRemove Event: ItemRemove

@Html.EJ().Tab(“ejTab”).ClientSideEvents(e => e.ItemRemove(“itemRemove”)).Render()
Event: Removed

@Html.EJS().Tab(“ej2Tab”).Removed(“onRemoved”).Render()
SelectedItemIndex Property: SelectedItemIndex

@Html.EJ().Tab(“ejTab”).SelectedItemIndex(“1”).Render()
Property: SelectedItem

@Html.EJS().Tab(“ej2Tab”).SelectedItem(“0”).Render()
Select item Not Applicable Method: select(index)

var tab = document.getElementById(‘ej2Tab’).ej2_instances[0];
tab.select(1);
BeforeActive Event: BeforeActive

@Html.EJ().Tab(“ejTab”).ClientSideEvents(e => e.BeforeActive(“beforeActive”)).Render()
Event: Selecting

@Html.EJS().Tab(“ej2Tab”).Selecting(“onSelecting”).Render()
AfterActive Event: ItemActive

@Html.EJ().Tab(“ejTab”).ClientSideEvents(e => e.ItemActive(“itemActive”)).Render()
Event: Selected

@Html.EJS().Tab(“ej2Tab”).Selected(“onSelected”).Render()
Disable items Property: DisabledItemIndex

@Html.EJ().Tab(“ejTab”).DisabledItemIndex(new List<int>() { 0, 1 }).Render()
Not Applicable
Enable items Property: EnabledItemIndex

@Html.EJ().Tab(“ejTab”).EnabledItemIndex(new List<int>() { 0, 1 }).Render()
Not Applicable
Enable/Disable item Not Applicable Property: Items[0].Disabled

@Html.EJS().Tab(“ej2Tab”).Items(item => {
  item.Disabled(true).Add();
}).Render()
Hide items Property: HiddenItemIndex

@Html.EJ().Tab(“ejTab”).HiddenItemIndex(new List<int>() { 0, 1 }).Render()
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

@Html.EJ().Tab(“ejTab”).Collapsible(true).Render()
Not Applicable
Custom class Property: CssClass

@Html.EJ().Tab(“ejTab”).CssClass(“cutomClass”).Render()
Property: CssClass

@Html.EJS().Tab(“ej2Tab”).CssClass(“cutomClass”).Render()
Enabled Property: Enabled

@Html.EJ().Tab(“ejTab”).Enabled(true).Render()
Method: disable(false)

var tab = document.getElementById(‘ej2Tab’).ej2_instances[0];
tab.disable(false);
Persistence Property: EnablePersistence

@Html.EJ().Tab(“ejTab”).EnablePersistence(true).Render()
Property: EnablePersistence

@Html.EJS().Tab(“ej2Tab”).EnablePersistence(true).Render()
Events Property: Events

@Html.EJ().Tab(“ejTab”).Events(“click”).Render()
Not Applicable
Height Property: Height

@Html.EJ().Tab(“ejTab”).Height(“500px”).Render()
Property: Height

@Html.EJS().Tab(“ej2Tab”).Height(“500px”).Render()
HeightAdjustMode Property: HeightAdjustMode

@Html.EJ().Tab(“ejTab”).HeightAdjustMode(HeightAdjustMode.Fill).Render()
Property: HeightAdjustMode

@Html.EJS().Tab(“ej2Tab”).HeightAdjustMode(Syncfusion.EJ2.Navigations.HeightStyles.Fill).Render()
HTML Attributes Property: HtmlAttributes

@Html.EJ().Tab(“ejTab”).HtmlAttributes(“”).Render()
Not Applicable
ID prefix Property: IdPrefix

@Html.EJ().Tab(“ejTab”).IdPrefix(“e-tab”).Render()
Not Applicable
ShowCloseButton Property: ShowCloseButton

@Html.EJ().Tab(“ejTab”).ShowCloseButton(true).Render()
Property: ShowCloseButton

@Html.EJS().Tab(“ej2Tab”).ShowCloseButton(true).Render()
ShowReloadIcon Property: ShowReloadIcon

@Html.EJ().Tab(“ejTab”).ShowReloadIcon(true).Render()
Not Applicable
ShowRoundedCorner Property: ShowRoundedCorner

@Html.EJ().Tab(“ejTab”).ShowRoundedCorner(true).Render()
Not Applicable
Width Property: Width

@Html.EJ().Tab(“ejTab”).Width(“500px”).Render()
Property: Width

@Html.EJS().Tab(“ej2Tab”).Width(“500px”).Render()
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
Show Tab Method: show()

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

var tab = document.getElementById(‘ej2Tab’).ej2_instances[0];
tab.refresh();
Created Event: Create

@Html.EJ().Tab(“ejTab”).ClientSideEvents(e => e.Create(“onCreate”)).Render()
Event: Created

@Html.EJS().Tab(“ej2Tab”).Created(“onCreated”).Render()
Destroyed Event: Destroy

@Html.EJ().Tab(“ejTab”).ClientSideEvents(e => e.Destroy(“onDestroy”)).Render()
Event: Destroyed

@Html.EJS().Tab(“ej2Tab”).Destroyed(“onDestroyed”).Render()