Migration from Essential JS 1

17 Feb 202214 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: allow-keyboard-navigation

<ej-accordion allow-keyboard-navigation="true" />
Not Applicable
Localization Not Applicable Property: locale

<ejs-accordion locale="en-US" />
RTL Property: enable-rtl

<ej-accordion enable-rtl="true" />
Property: enableRtl

<ejs-accordion enableRtl="true" />

AjaxSettings

Behavior API in Essential JS 1 API in Essential JS 2
Default Property: ajax-settings

<ej-accordion>
  <e-ajax-settings type="GET" />
</ej-accordion>
Not Applicable
Asynchronous Property: async

<ej-accordion>
  <e-ajax-settings async="true" />
</ej-accordion>
Not Applicable
Browser Cache Property: cache

<ej-accordion>
  <e-ajax-settings cache="false" />
</ej-accordion>
Not Applicable
Request type Property: contentType

<ej-accordion>
  <e-ajax-settings content-type="html" />
</ej-accordion>
Not Applicable
Data Property: data

<ej-accordion>
  <e-ajax-settings data="" />
</ej-accordion>
Not Applicable
Response type Property: dataType

<ej-accordion>
  <e-ajax-settings data-type="html" />
</ej-accordion>
Not Applicable
HTTP request type Property: type

<ej-accordion>
  <e-ajax-settings type="GET" />
</ej-accordion>
Not Applicable
AjaxBeforeLoad Event: ajax-before-load

<ej-accordion ajax-before-load="beforeLoad" />
Not Applicable
AjaxError Event: ajax-error

<ej-accordion ajax-error="onError" />
Not Applicable
AjaxLoad Event: ajax-load

<ej-accordion ajax-load="onLoad" />
Not Applicable
AjaxSuccess Event: ajax-success

<ej-accordion ajax-success="onSuccess" />
Not Applicable

Animation

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

<ejs-accordion enableRtl="true">
  <e-accordion-animation expand="" collapse="" />
</ejs-accordion>
EnableAnimation Property: enable-animation

<ej-accordion enable-animation="false" />
Not Applicable
Expand animation Not Applicable Property: expand

<ejs-accordion>
  <e-accordion-animation expand="@ViewBag.animation" />
</ejs-accordion>
Collapse animation Not Applicable Property: collapse

<ejs-accordion>
  <e-accordion-animation collapse="@ViewBag.animation" />
</ejs-accordion>
Duration
[expand / collapse]		 Not Applicable Property: duration

<ejs-accordion>
  <e-accordion-expand duration="400" />
  </ejs-accordion>
Easing
[expand / collapse]		 Not Applicable Property: easing

<ejs-accordion>
  <e-accordion-expand easing="ease-in" />
  </ejs-accordion>
Effect
[expand / collapse]		 Not Applicable Property: effect

<ejs-accordion>
  <e-accordion-expand effect="SlideLeft" />
  </ejs-accordion>

Items

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

<ejs-accordion>
  <e-accordion-accordionitems />
</ejs-accordion>
Content Not Applicable Property: items[0].content

<ejs-accordion>
  <e-accordion-accordionitems>
    <e-accordion-accordionitem content="Welcome" />
  </e-accordion-accordionitems>
</ejs-accordion>
Custom class Not Applicable Property: items[0].cssClass

<ejs-accordion>
  <e-accordion-accordionitems>
   <e-accordion-accordionitem cssClass="custom-style" />
  </e-accordion-accordionitems>
</ejs-accordion>
Header Not Applicable Property: items[0].header

<ejs-accordion>
  <e-accordion-accordionitems>
   <e-accordion-accordionitem header="Syncfusion" />
  </e-accordion-accordionitems>
</ejs-accordion>
HeaderSize Property: header-size

<ej-accordion header-size="50px" />
Not Applicable
Icon class Not Applicable Property: items[0].iconCss

<ejs-accordion>
  <e-accordion-accordionitems>
   <e-accordion-accordionitem iconCss="e-pause" />
  </e-accordion-accordionitems>
</ejs-accordion>
IsExpand Not Applicable Property: items[0].expanded

<ejs-accordion>
  <e-accordion-accordionitems>
   <e-accordion-accordionitem expanded="true" />
  </e-accordion-accordionitems>
</ejs-accordion>
Collapse Item Method: collapsePanel(index)

var accordion = $(“#accordion”).data(“ejAccordion”);
accordion.collapsePanel(0);
Method: expandItem(index, false)

var accordion = document.getElementById(‘accordion’).ej2_instances[0];
accordion.expandItem(0, false);
Expand Item Method: expandPanel(index)

var accordion = $(“#accordion”).data(“ejAccordion”);
accordion.expandPanel(0);
Method: expandItem(index, true)

var accordion = document.getElementById(‘accordion’).ej2_instances[0];
accordion.expandItem(0, true);
CollapseAll Method: collapseAll()

var accordion = $(“#accordion”).data(“ejAccordion”);
accordion.collapseAll();
Not Applicable
ExpandAll Method: expandAll()

var accordion = $(“#accordion”).data(“ejAccordion”);
accordion.expandAll();
Not Applicable
Get ItemsCount Method: getItemsCount()

var accordion = $(“#accordion”).data(“ejAccordion”);
accordion.getItemsCount();
Not Applicable
AddItem Method: addItem(text, content, index)

var accordion = $(“#accordion”).data(“ejAccordion”);
accordion.addItem(“New item”, “The accordion content”, 2);
Method: addItem(items, index)

var accordion = document.getElementById(‘accordion’).ej2_instances[0];
accordion.addItem([{ header: ‘App’, content: ‘text’ }], 0)
Remove Item Method: removeItem(index)

var accordion = $(“#accordion”).data(“ejAccordion”);
accordion.removeItem(0);
Method: removeItem(index)

var accordion = document.getElementById(‘accordion’).ej2_instances[0];
accordion.removeItem(0)
Disable Items Property: disabled-items

<ej-accordion disabled-items="@ViewBag.disableItems" />
Not Applicable
Enable Items Property: enabled-items

<ej-accordion enabled-items="@ViewBag.enableItems" />
Not Applicable
Disable Item Method: disableItems([index])

var accordion = $(“#accordion”).data(“ejAccordion”);
accordion.disableItems([1]);
Method: enableItem(index, false)

var accordion = document.getElementById(‘accordion’).ej2_instances[0];
accordion.enableItem(0, false)
Enable Item Method: enableItems([index])

var accordion = $(“#accordion”).data(“ejAccordion”);
accordion.enableItems([1]);
Method: enableItem(index, true)

var accordion = document.getElementById(‘accordion’).ej2_instances[0];
accordion.enableItem(0, true)
Hide Item Not Applicable Method: hideItem(index, true)

var accordion = document.getElementById(‘accordion’).ej2_instances[0];
accordion.hideItem(0, true)
SelectedItemIndex Property: selected-item-index

<ej-accordion selected-item-index="0" />
Not Applicable
Select Not Applicable Method: select(index)

var accordion = document.getElementById(‘accordion’).ej2_instances[0];
accordion.select(0)
BeforeActivate Event: before-activate

<ej-accordion before-activate="beforeActive" />
Event: expanding

<ejs-accordion expanding="onExpanding" />
Activate Event: activate

<ej-accordion activate="onActivate" />
Event: expanded

<ejs-accordion expanded="onExpanded" />
beforeInActivate Event: before-in-activate

<ej-accordion before-in-activate="beforeInActive" />
Not Applicable
InActive Event: in-activate

<ej-accordion in-activate="inActivate" />
Not Applicable
Clicked Not Applicable Event: clicked

<ejs-accordion clicked="onClicked" />

Common

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

<ej-accordion collapsible="false" />
Not Applicable
Collapse speed Property: collapse-speed

<ej-accordion collapse-speed="500" />
Not Applicable
Custom class Property: css-class

<ej-accordion css-class="e-icon" />
Not Applicable
CustomIcon class Property: custom-icon

<ej-accordion custom-icon="@ViewBag.customIcon" />
Not Applicable
Enabled Property: enabled

<ej-accordion enabled="false" />
Not Applicable
Events Property: events

<ej-accordion events="mouseover" />
Not Applicable
Expand speed Property: expand-speed

<ej-accordion expand-speed="300" />
Not Applicable
Height Property: height

<ej-accordion height="700px" />
Property: height

<ejs-accordion height="700px" />
HeightAdjustMode Property: height-adjust-mode

<ej-accordion height-adjust-mode="Content" />
Not Applicable
HtmlAttributes Property: html-attributes

<ej-accordion html-attributes="@ViewBag.attributes" />
Not Applicable
MultipleOpen Property: enable-multiple-open

<ej-accordion enable-multiple-open="true" />
Property: expandMode

<ejs-accordion expandMode="Multiple" />
Persistence Property: enable-persistence

<ej-accordion enable-persistence="true" />
Property: enablePersistence

<ejs-accordion enablePersistence="true" />
ShowRounderCorner Property: show-rounded-corner

<ej-accordion show-rounded-corner="true" />
Not Applicable
Width Property: width

<ej-accordion width="500px" />
Property: width

<ejs-accordion width="500px" />
Enable Method: enable()

var accordion = $(“#accordion”).data(“ejAccordion”);
accordion.enable();
Not Applicable
Disable Method: disable()

var accordion = $(“#accordion”).data(“ejAccordion”);
accordion.disable();
Not Applicable
Show Method: show()

var accordion = $(“#accordion”).data(“ejAccordion”);
accordion.show();
Not Applicable
Hide Method: hide()

var accordion = $(“#accordion”).data(“ejAccordion”);
accordion.hide();
Not Applicable
Destroy Method: destroy()

var accordion = $(“#accordion”).data(“ejAccordion”);
accordion.destroy();
Method: destroy()

var accordion = document.getElementById(‘accordion’).ej2_instances[0];
accordion.destroy();
Refresh Method: refresh()

var accordion = $(“#accordion”).data(“ejAccordion”);
accordion.refresh();
Method: refresh()

var accordion = document.getElementById(‘accordion’).ej2_instances[0];
accordion.refresh();
Created Event: create

<ej-accordion create="onCreate" />
Event: created

<ejs-accordion created="onCreated" />
Destroyed Event: destroy

<ej-accordion destroy="onDestroy" />
Event: destroyed

<ejs-accordion destroyed="onDestroyed" />