Ej1 api migration in EJ2 TypeScript Accordion control

6 May 202517 minutes to read

This article describes the API migration process of Accordion 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 accordion = new ej.Accordion($(“#accordion”), {
  allowKeyboardNavigation: false
});
Not Applicable
Localization Not Applicable Property: locale

let accordion: Accordion = new Accordion({
  locale: ‘en-US’
});
accordion.appendTo(‘#ej2Accordion’);
RTL Property: enableRTL

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

let accordion: Accordion = new Accordion({
  enableRtl: false
});
accordion.appendTo(‘#ej2Accordion’);

AjaxSettings

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

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

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

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

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

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

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

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

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

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

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

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

Animation

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

let accordion: Accordion = new Accordion({
  animation: { expand: { }, collapse: { } }
});
accordion.appendTo(‘#ej2Accordion’);
EnableAnimation Property: enableAnimation

var accordion = new ej.Accordion($(“#accordion”), {
  enableAnimation: false
});
Not Applicable
Expand animation Not Applicable Property: animation.expand

let accordion: Accordion = new Accordion({
  animation: {
    expand: {
      duration: 400,
      easing: ‘ease-in’,
      effect: ‘SlideLeft’
    }
  }
});
accordion.appendTo(‘#ej2Accordion’);
Collapse animation Not Applicable Property: animation.collapse

let accordion: Accordion = new Accordion({
  animation: {
    collapse: {
      duration: 400,
      easing: ‘ease-in’,
      effect: ‘SlideLeft’
    }
  }
});
accordion.appendTo(‘#ej2Accordion’);
Duration
[expand / collapse]		 Not Applicable Property: animation.collapse.duration

let accordion: Accordion = new Accordion({
  animation: {
    expand: { duration: 400 }
  }
});
accordion.appendTo(‘#ej2Accordion’);
Easing
[expand / collapse]		 Not Applicable Property: animation.collapse.easing

let accordion: Accordion = new Accordion({
  animation: {
    expand: { easing: ‘ease-in’ }
  }
});
accordion.appendTo(‘#ej2Accordion’);
Effect
[expand / collapse]		 Not Applicable Property: animation.collapse.effect

let accordion: Accordion = new Accordion({
  animation: {
    expand: { effect: ‘SlideLeft’ }
  }
});
accordion.appendTo(‘#ej2Accordion’);

Items

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

let accordion: Accordion = new Accordion({
  items: []
});
accordion.appendTo(‘#ej2Accordion’);
Content Not Applicable Property: items[0].content

let accordion: Accordion = new Accordion({
  items: [{ content: ‘Contents’ }]
});
accordion.appendTo(‘#ej2Accordion’);
Custom class Not Applicable Property: items[0].cssClass

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

let accordion: Accordion = new Accordion({
  items: [{ header: ‘Header1’ }]
});
accordion.appendTo(‘#ej2Accordion’);
HeaderSize Property: headerSize

var accordion = new ej.Accordion($(“#accordion”), {
  headerSize: ‘50px’
});
Not Applicable
Icon class Not Applicable Property: items[0].iconCss

let accordion: Accordion = new Accordion({
  items: [{ iconCss: ‘e-icons’ }]
});
accordion.appendTo(‘#ej2Accordion’);
IsExpand Not Applicable Property: items[0].expanded

let accordion: Accordion = new Accordion({
  items: [{ expanded: true }]
});
accordion.appendTo(‘#ej2Accordion’);
Collapse Item Method: collapsePanel(index)

var accordion = new ej.Accordion($(“#accordion”), {});
accordion.collapsePanel(0);
Method: expandItem(index, false)

let accordion: Accordion = new Accordion();
accordion.appendTo(‘#ej2Accordion’);
accordion.expandItem(0, false);
Expand Item Method: expandPanel(index)

var accordion = new ej.Accordion($(“#accordion”), {});
accordion.expandPanel(0);
Method: expandItem(index, true)

let accordion: Accordion = new Accordion();
accordion.appendTo(‘#ej2Accordion’);
accordion.expandItem(0, true);
CollapseAll Method: collapseAll()

var accordion = new ej.Accordion($(“#accordion”), {});
accordion.collapseAll();
Not Applicable
ExpandAll Method: expandAll()

var accordion = new ej.Accordion($(“#accordion”), {});
accordion.expandAll();
Not Applicable
Get ItemsCount Method: getItemsCount()

var accordion = new ej.Accordion($(“#accordion”), {});
accordion.getItemsCount();
Not Applicable
AddItem Method: addItem(text, content, index)

var accordion = new ej.Accordion($(“#accordion”), {});
accordion.addItem(“New item”, “The accordion content”, 2);
Method: addItem(items, index)

let accordion: Accordion = new Accordion();
accordion.appendTo(‘#ej2Accordion’);
accordion.addItem([{ header: ‘App’, content: ‘text’ }], 0)
Remove Item Method: removeItem(index)

var accordion = new ej.Accordion($(“#accordion”), {});
accordion.removeItem(0);
Method: removeItem(index)

let accordion: Accordion = new Accordion();
accordion.appendTo(‘#ej2Accordion’);
accordion.removeItem(0)
Disable Items Property: disablesItems

$(“#accordion”).ejAccordion({
  disabledItems: [0, 1]
});
Not Applicable
Enable Items Property: enabledItems

$(“#accordion”).ejAccordion({
  enabledItems: [0, 1]
});
Not Applicable
Disable Item Method: disableItems([index])

var accordion = new ej.Accordion($(“#accordion”), {});
accordion.disableItems([1]);
Method: enableItem(index, false)

let accordion: Accordion = new Accordion();
accordion.appendTo(‘#ej2Accordion’);
accordion.enableItem(0, false)
Enable Item Method: enableItems([index])

var accordion = new ej.Accordion($(“#accordion”), {});
accordion.enableItems([1]);
Method: enableItem(index, true)

let accordion: Accordion = new Accordion();
accordion.appendTo(‘#ej2Accordion’);
accordion.enableItem(0, true)
Hide Item Not Applicable Method: hideItem(index, true)

let accordion: Accordion = new Accordion();
accordion.appendTo(‘#ej2Accordion’);
accordion.hideItem(0, true)
SelectedItemIndex Property: selectedItemIndex

var accordion = new ej.Accordion($(“#accordion”), {
  selectedItemIndex: false
});
Not Applicable
Select Not Applicable Method: select(index)

let accordion: Accordion = new Accordion();
accordion.appendTo(‘#ej2Accordion’);
accordion.select(0)
BeforeActivate Event: beforeActivate

var accordion = new ej.Accordion($(“#accordion”), {
  beforeActivate: function(args) {}
});
Event: expanding

let accordion: Accordion = new Accordion({
  expanding: function(e: Event): void { }
});
accordion.appendTo(‘#ej2Accordion’);
Activate Event: activate

var accordion = new ej.Accordion($(“#accordion”), {
  activate: function(args) {}
});
Event: expanded

let accordion: Accordion = new Accordion({
  expanded: function(e: Event): void { }
});
accordion.appendTo(‘#ej2Accordion’);
beforeInActivate Event: beforeInactivate

var accordion = new ej.Accordion($(“#accordion”), {
  beforeInactivate: function(args) {}
});
Not Applicable
InActive Event: inActivate

var accordion = new ej.Accordion($(“#accordion”), {
  inActivate: function(args) {}
});
Not Applicable
Clicked Not Applicable Event: clicked

let accordion: Accordion = new Accordion({
  clicked: function(e: Event): void { }
});
accordion.appendTo(‘#ej2Accordion’);

Common

Behavior API in Essential® JS 1 API in Essential® JS 2
Collapsible Property: collapsible

var accordion = new ej.Accordion($(“#accordion”), {
  collapsible: false
});
Not Applicable
Collapse speed Property: collapseSpeed

var accordion = new ej.Accordion($(“#accordion”), {
  collapseSpeed: 500
});
Not Applicable
Custom class Property: cssClass

var accordion = new ej.Accordion($(“#accordion”), {
  cssClass: ‘custom’
});
Not Applicable
CustomIcon class Property: customIcon

var accordion = new ej.Accordion($(“#accordion”), {
  customIcon: {
    header: “header-close”,
    selectedHeader: “header-expand”
  }
});
Not Applicable
Enabled Property: enabled

var accordion = new ej.Accordion($(“#accordion”), {
  enabled: false
});
Not Applicable
Events Property: events

var accordion = new ej.Accordion($(“#accordion”), {
  events: “mouseover”
});
Not Applicable
Expand speed Property: expandSpeed

var accordion = new ej.Accordion($(“#accordion”), {
  expandSpeed: 300
});
Not Applicable
Height Property: height

var accordion = new ej.Accordion($(“#accordion”), {
  height: 400
});
Property: height

let accordion: Accordion = new Accordion({
  height: 700
});
accordion.appendTo(‘#ej2Accordion’);
HeightAdjustMode Property: heightAdjustMode

var accordion = new ej.Accordion($(“#accordion”), {
  heightAdjustMode: “content”
});
Not Applicable
HtmlAttributes Property: htmlAttributes

var accordion = new ej.Accordion($(“#accordion”), {
  htmlAttributes: { title: “Demo” }
});
Not Applicable
MultipleOpen Property: enableMultipleOpen

var accordion = new ej.Accordion($(“#accordion”), {
  enableMultipleOpen: true
});
Property: expandMode

let accordion: Accordion = new Accordion({
  expandMode: ‘Multiple’
});
accordion.appendTo(‘#ej2Accordion’);
Persistence Property: enablePersistence

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

let accordion: Accordion = new Accordion({
  enablePersistence: true
});
accordion.appendTo(‘#ej2Accordion’);
ShowRounderCorner Property: showRoundedCorner

var accordion = new ej.Accordion($(“#accordion”), {
  showRoundedCorner: false
});
Not Applicable
Width Property: width

var accordion = new ej.Accordion($(“#accordion”), {
  width: 600
});
Property: width

let accordion: Accordion = new Accordion({
  width: 500
});
accordion.appendTo(‘#ej2Accordion’);
Enable Method: enable()

var accordion = new ej.Accordion($(“#accordion”), {});
accordion.enable();
Not Applicable
Disable Method: disable()

var accordion = new ej.Accordion($(“#accordion”), {});
accordion.disable();
Not Applicable
Show Method: show()

var accordion = new ej.Accordion($(“#accordion”), {});
accordion.show();
Not Applicable
Hide Method: hide()

var accordion = new ej.Accordion($(“#accordion”), {});
accordion.hide();
Not Applicable
Destroy Method: destroy()

var accordion = new ej.Accordion($(“#accordion”), {});
accordion.destroy();
Method: destroy()

let accordion: Accordion = new Accordion();
accordion.appendTo(‘#ej2Accordion’);
accordion.destroy();
Refresh Method: refresh()

var accordion = new ej.Accordion($(“#accordion”), {});
accordion.refresh();
Method: refresh()

let accordion: Accordion = new Accordion();
accordion.appendTo(‘#ej2Accordion’);
accordion.refresh();
Created Event: create

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

let accordion: Accordion = new Accordion({
  created: function(e: Event): void { }
});
accordion.appendTo(‘#ej2Accordion’);
Destroyed Event: destroy

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

let accordion: Accordion = new Accordion({
  destroyed: function(e: Event): void { }
});
accordion.appendTo(‘#ej2Accordion’);