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: 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() |