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’); |
Header
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’); |