Migration from Essential® JS 1

8 Dec 202414 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

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

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

@Html.EJ().Accordion(“ejAccoordion”).EnableRTL(true).Render()
Property: EnableRtl

@Html.EJS().Accordion(“ej2Accordion”).EnableRtl(true).Render()

AjaxSettings

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

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

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

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

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

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

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

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

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

@Html.EJ().Accordion(“ejAccoordion”).ClientSideEvents(e => e.AjaxError(“onError”)).Render()
Not Applicable
AjaxLoad Event: AjaxLoad

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

@Html.EJ().Accordion(“ejAccoordion”).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().Accordion(“ej2Accordion”).Animation(anim => {
  anim.Expand(“”).Collapse(“”);
}).Render()
EnableAnimation Property: EnableAnimation

@Html.EJ().Accordion(“ejAccoordion”).EnableAnimation(false).Render()
Not Applicable
Expand animation Not Applicable Property: Animation.Expand

@Html.EJS().Accordion(“ej2Accordion”).Animation(anim => {
  anim.Expand(new List<AccordionAccordionActionSettings>() {
    new AccordionAccordionActionSettings() { Effect = “SlideDown” }
  });
}).Render()
Collapse animation Not Applicable Property: Animation.Collapse

@Html.EJS().Accordion(“ej2Accordion”).Animation(anim => {
  anim.Collapse(new List<AccordionAccordionActionSettings>() {
    new AccordionAccordionActionSettings() { Effect = “SlideUp” }
  });
}).Render()
Duration
[expand / collapse]		 Not Applicable Property: Animation.Collapse.Duration

@Html.EJS().Accordion(“ej2Accordion”).Animation(anim => {
  anim.Collapse(new List<AccordionAccordionActionSettings>() {
    new AccordionAccordionActionSettings() { Duration = 400 }
  });
}).Render()
Easing
[expand / collapse]		 Not Applicable Property: Animation.Collapse.Easing

@Html.EJS().Accordion(“ej2Accordion”).Animation(anim => {
  anim.Collapse(new List<AccordionAccordionActionSettings>() {
    new AccordionAccordionActionSettings() { Easing = “ease-in” }
  });
}).Render()
Effect
[expand / collapse]		 Not Applicable Property: Animation.Collapse.Effect

@Html.EJS().Accordion(“ej2Accordion”).Animation(anim => {
  anim.Collapse(new List<AccordionAccordionActionSettings>() {
    new AccordionAccordionActionSettings() { Effect = “SlideDown” }
  });
}).Render()

Items

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

@Html.EJS().Accordion(“ej2Accordion”).Items(item => {
  item.Header(“”).Content(“”).Add();
}).Render()
Content Not Applicable Property: Items[0].Content

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

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

@Html.EJS().Accordion(“ej2Accordion”).Items(item => {
  item.Header(“Header”).Add();
}).Render()
HeaderSize Property: HeaderSize

@Html.EJ().Accordion(“ejAccoordion”).HeaderSize(“50px”).Render()
Not Applicable
Icon class Not Applicable Property: Items[0].IconCss

@Html.EJS().Accordion(“ej2Accordion”).Items(item => {
  item.iconCss(“e-icon”).Add();
}).Render()
IsExpand Not Applicable Property: Items[0].Expanded

@Html.EJS().Accordion(“ej2Accordion”).Items(item => {
  item.Expand(true).Add();
}).Render()
Collapse Item Method: collapsePanel(index)

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

var accordion = document.getElementById(‘ej2Accordion’).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(‘ej2Accordion’).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(‘ej2Accordion’).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(‘ej2Accordion’).ej2_instances[0];
accordion.removeItem(0)
Disable Items Property: DisabledItems

@Html.EJ().Accordion(“ejAccoordion”).DisabledItems(new List<int>() { 0, 1 }).Render()
Not Applicable
Enable Items Property: EnabledItems

@Html.EJ().Accordion(“ejAccoordion”).EnabledItems(new List<int>() { 0, 1 }).Render()
Not Applicable
Disable Item Method: disableItems([index])

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

var accordion = document.getElementById(‘ej2Accordion’).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(‘ej2Accordion’).ej2_instances[0];
accordion.enableItem(0, true)
Hide Item Not Applicable Method: hideItem(index, true)

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

@Html.EJ().Accordion(“ejAccoordion”).SelectedItemIndex(“1”).Render()
Not Applicable
Select Not Applicable Method: select(index)

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

@Html.EJ().Accordion(“ejAccoordion”).ClientSideEvents(e=>e.BeforeActivate(“beforeActivate”)).Render()
Event: Expanding

@Html.EJS().Accordion(“ej2Accordion”).Expanding(“onExpanding”).Render()
Activate Event: Activate

@Html.EJ().Accordion(“ejAccoordion”).ClientSideEvents(e=>e.Activate(“onActivate”)).Render()
Event: Expanded

@Html.EJS().Accordion(“ej2Accordion”).Expanded(“onExpanded”).Render()
beforeInActivate Event: BeforeInactivate

@Html.EJ().Accordion(“ejAccoordion”).ClientSideEvents(e=>e.BeforeInActivate(“beforeInActivate”)).Render()
Not Applicable
InActive Event: InActivate

@Html.EJ().Accordion(“ejAccoordion”).ClientSideEvents(e=>e.InActive(“inActive”)).Render()
Not Applicable
Clicked Not Applicable Event: Clicked

@Html.EJS().Accordion(“ej2Accordion”).Clicked(“onClicked”).Render()

Common

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

@Html.EJ().Accordion(“ejAccoordion”).Collapsible(true).Render()
Not Applicable
Collapse speed Property: CollapseSpeed

@Html.EJ().Accordion(“ejAccoordion”).CollapseSpeed(“500”).Render()
Not Applicable
Custom class Property: CssClass

@Html.EJ().Accordion(“ejAccoordion”).CssClass(“custom”).Render()
Not Applicable
CustomIcon class Property: CustomIcon

@Html.EJ().Accordion(“ejAccoordion”).CustomIcon(@ViewBag.CustomIcon).Render()
Not Applicable
Enabled Property: Enabled

@Html.EJ().Accordion(“ejAccoordion”).Enabled(false).Render()
Not Applicable
Events Property: Events

@Html.EJ().Accordion(“ejAccoordion”).Events(“mouseover”).Render()
Not Applicable
Expand speed Property: ExpandSpeed

@Html.EJ().Accordion(“ejAccoordion”).ExpandSpeed(300).Render()
Not Applicable
Height Property: Height

@Html.EJ().Accordion(“ejAccoordion”).Height(“400px”).Render()
Property: Height

@Html.EJS().Accordion(“ej2Accordion”).Height(“500px”).Render()
HeightAdjustMode Property: HeightAdjustMode

@Html.EJ().Accordion(“ejAccoordion”).HeightAdjustMode(HeightAdjustMode.Fill).Render()
Not Applicable
HtmlAttributes Property: HtmlAttributes

@Html.EJ().Accordion(“ejAccoordion”).HtmlAttributes(“”).Render()
Not Applicable
MultipleOpen Property: EnableMultipleOpen

@Html.EJ().Accordion(“ejAccoordion”).EnableMultipleOpen(true).Render()
Property: ExpandMode

@Html.EJS().Accordion(“ej2Accordion”).ExpandMode(Syncfusion.EJ2.Navigations.ExpandMode.Single).Render()
Persistence Property: EnablePersistence

@Html.EJ().Accordion(“ejAccoordion”).EnablePersistence(true).Render()
Property: EnablePersistence

@Html.EJS().Accordion(“ej2Accordion”).EnablePersistence(true).Render()
ShowRounderCorner Property: ShowRoundedCorner

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

@Html.EJ().Accordion(“ejAccoordion”).Width(“500px”).Render()
Property: Width

@Html.EJS().Accordion(“ej2Accordion”).Width(“500px”).Render()
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(‘ej2Accordion’).ej2_instances[0];
accordion.destroy();
Refresh Method: refresh()

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

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

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

@Html.EJS().Accordion(“ej2Accordion”).Created(“onCreated”).Render()
Destroyed Event: Destroy

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

@Html.EJS().Accordion(“ej2Accordion”).Destroyed(“onDestroyed”).Render()