Ej1 api migration in EJ2 JavaScript Accordion control
2 May 202316 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 $(“#accordion”).ejAccordion({ allowKeyboardNavigation: false }); |
Not Applicable |
Localization | Not Applicable |
Property: locale var accordion = new ej.navigations.Accordion({ locale: ‘en-US’ }); accordion.appendTo(‘#ej2Accordion’); |
RTL |
Property: enableRTL $(“#accordion”).ejAccordion({ enableRTL: false }); |
Property: enableRtl var accordion = new ej.navigations.Accordion({ enableRtl: false }); accordion.appendTo(‘#ej2Accordion’); |
AjaxSettings
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default |
Property: ajaxSettings $(“#accordion”).ejAccordion({ ajaxSettings: { type: ‘GET’ } }); |
Not Applicable |
Asynchronous |
Property: ajaxSettings.async $(“#accordion”).ejAccordion({ ajaxSettings: { async: true } }); |
Not Applicable |
Browser Cache |
Property: ajaxSettings.cache $(“#accordion”).ejAccordion({ ajaxSettings: { cache: false } }); |
Not Applicable |
Request type |
Property: ajaxSettings.contentType $(“#accordion”).ejAccordion({ ajaxSettings: { contentType: “html” } }); |
Not Applicable |
Data |
Property: ajaxSettings.data $(“#accordion”).ejAccordion({ ajaxSettings: { data: {} } }); |
Not Applicable |
Response type |
Property: ajaxSettings.dataType $(“#accordion”).ejAccordion({ ajaxSettings: { dataType: “html” } }); |
Not Applicable |
HTTP request type |
Property: ajaxSettings.type $(“#accordion”).ejAccordion({ ajaxSettings: { type: ‘GET’ } }); |
Not Applicable |
AjaxBeforeLoad |
Event: ajaxBeforeLoad $(“#accordion”).ejAccordion({ ajaxBeforeLoad: function(args) {} }); |
Not Applicable |
AjaxError |
Event: ajaxError $(“#accordion”).ejAccordion({ ajaxError: function(args) {} }); |
Not Applicable |
AjaxLoad |
Event: ajaxLoad $(“#accordion”).ejAccordion({ ajaxLoad: function(args) {} }); |
Not Applicable |
AjaxSuccess |
Event: ajaxSuccess $(“#accordion”).ejAccordion({ ajaxSuccess: function(args) {} }); |
Not Applicable |
Animation
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Default | Not Applicable |
Property: animation var accordion = new ej.navigations.Accordion({ animation: { expand: { }, collapse: { } } }); accordion.appendTo(‘#ej2Accordion’); |
EnableAnimation |
Property: enableAnimation $(“#accordion”).ejAccordion({ enableAnimation: false }); |
Not Applicable |
Expand animation | Not Applicable |
Property: animation.expand var accordion = new ej.navigations.Accordion({ animation: { expand: { duration: 400, easing: ‘ease-in’, effect: ‘SlideLeft’ } } }); accordion.appendTo(‘#ej2Accordion’); |
Collapse animation | Not Applicable |
Property: animation.collapse var accordion = new ej.navigations.Accordion({ animation: { collapse: { duration: 400, easing: ‘ease-in’, effect: ‘SlideLeft’ } } }); accordion.appendTo(‘#ej2Accordion’); |
Duration [expand / collapse] |
Not Applicable |
Property: animation.collapse.duration var accordion = new ej.navigations.Accordion({ animation: { expand: { duration: 400 } } }); accordion.appendTo(‘#ej2Accordion’); |
Easing [expand / collapse] |
Not Applicable |
Property: animation.collapse.easing var accordion = new ej.navigations.Accordion({ animation: { expand: { easing: ‘ease-in’ } } }); accordion.appendTo(‘#ej2Accordion’); |
Effect [expand / collapse] |
Not Applicable |
Property: animation.collapse.effect var accordion = new ej.navigations.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 var accordion = new ej.navigations.Accordion({ items: [] }); accordion.appendTo(‘#ej2Accordion’); |
Content | Not Applicable |
Property: items[0].content var accordion = new ej.navigations.Accordion({ items: [{ content: ‘Contents’ }] }); accordion.appendTo(‘#ej2Accordion’); |
Custom class | Not Applicable |
Property: items[0].cssClass var accordion = new ej.navigations.Accordion({ items: [{ cssClass: ‘customClass’ }] }); accordion.appendTo(‘#ej2Accordion’); |
Header | Not Applicable |
Property: items[0].header var accordion = new ej.navigations.Accordion({ items: [{ header: ‘Header1’ }] }); accordion.appendTo(‘#ej2Accordion’); |
HeaderSize |
Property: headerSize $(“#accordion”).ejAccordion({ headerSize: ‘50px’ }); |
Not Applicable |
Icon class | Not Applicable |
Property: items[0].iconCss var accordion = new ej.navigations.Accordion({ items: [{ iconCss: ‘e-icons’ }] }); accordion.appendTo(‘#ej2Accordion’); |
IsExpand | Not Applicable |
Property: items[0].expanded var accordion = new ej.navigations.Accordion({ items: [{ expanded: true }] }); accordion.appendTo(‘#ej2Accordion’); |
Collapse Item |
Method: collapsePanel(index) $(“#accordion”).ejTab(); var accordion = $(“#accordion”).data(“ejAccordion”); accordion.collapsePanel(0); |
Method: expandItem(index, false) var accordion = new ej.navigations.Accordion(); accordion.appendTo(‘#ej2Accordion’); accordion.expandItem(0, false); |
Expand Item |
Method: expandPanel(index) $(“#accordion”).ejTab(); var accordion = $(“#accordion”).data(“ejAccordion”); accordion.expandPanel(0); |
Method: expandItem(index, true) var accordion = new ej.navigations.Accordion(); accordion.appendTo(‘#ej2Accordion’); accordion.expandItem(0, true); |
CollapseAll |
Method: collapseAll() $(“#accordion”).ejTab(); var accordion = $(“#accordion”).data(“ejAccordion”); accordion.collapseAll(); |
Not Applicable |
ExpandAll |
Method: expandAll() $(“#accordion”).ejTab(); var accordion = $(“#accordion”).data(“ejAccordion”); accordion.expandAll(); |
Not Applicable |
Get ItemsCount |
Method: getItemsCount() $(“#accordion”).ejTab(); var accordion = $(“#accordion”).data(“ejAccordion”); accordion.getItemsCount(); |
Not Applicable |
AddItem |
Method: addItem(text, content, index) $(“#accordion”).ejTab(); var accordion = $(“#accordion”).data(“ejAccordion”); accordion.addItem(“New item”, “The accordion content”, 2); |
Method: addItem(items, index) var accordion = new ej.navigations.Accordion(); accordion.appendTo(‘#ej2Accordion’); accordion.addItem([{ header: ‘App’, content: ‘text’ }], 0) |
Remove Item |
Method: removeItem(index) $(“#accordion”).ejTab(); var accordion = $(“#accordion”).data(“ejAccordion”); accordion.removeItem(0); |
Method: removeItem(index) var accordion = new ej.navigations.Accordion(); accordion.appendTo(‘#ej2Accordion’); accordion.removeItem(0) |
Disable Items |
Property: disablesItems $(“#accordion”).ejTab({ disabledItems: [0, 1] }); |
Not Applicable |
Enable Items |
Property: enabledItems $(“#accordion”).ejTab({ enabledItems: [0, 1] }); |
Not Applicable |
Disable Item |
Method: disableItems([index]) $(“#accordion”).ejTab(); var accordion = $(“#accordion”).data(“ejAccordion”); accordion.disableItems([1]); |
Method: enableItem(index, false) var accordion = new ej.navigations.Accordion(); accordion.appendTo(‘#ej2Accordion’); accordion.enableItem(0, false) |
Enable Item |
Method: enableItems([index]) $(“#accordion”).ejTab(); var accordion = $(“#accordion”).data(“ejAccordion”); accordion.enableItems([1]); |
Method: enableItem(index, true) var accordion = new ej.navigations.Accordion(); accordion.appendTo(‘#ej2Accordion’); accordion.enableItem(0, true) |
Hide Item | Not Applicable |
Method: hideItem(index, true) var accordion = new ej.navigations.Accordion(); accordion.appendTo(‘#ej2Accordion’); accordion.hideItem(0, true) |
SelectedItemIndex |
Property: selectedItemIndex $(“#accordion”).ejAccordion({ selectedItemIndex: false }); |
Not Applicable |
Select | Not Applicable |
Method: select(index) var accordion = new ej.navigations.Accordion(); accordion.appendTo(‘#ej2Accordion’); accordion.select(0) |
BeforeActivate |
Event: beforeActivate $(“#accordion”).ejAccordion({ beforeActivate: function(args) {} }); |
Event: expanding var accordion = new ej.navigations.Accordion({ expanding: function(e: Event): void { } }); accordion.appendTo(‘#ej2Accordion’); |
Activate |
Event: activate $(“#accordion”).ejAccordion({ activate: function(args) {} }); |
Event: expanded var accordion = new ej.navigations.Accordion({ expanded: function(e: Event): void { } }); accordion.appendTo(‘#ej2Accordion’); |
beforeInActivate |
Event: beforeInactivate $(“#accordion”).ejAccordion({ beforeInactivate: function(args) {} }); |
Not Applicable |
InActive |
Event: inActivate $(“#accordion”).ejAccordion({ inActivate: function(args) {} }); |
Not Applicable |
Clicked | Not Applicable |
Event: clicked var accordion = new ej.navigations.Accordion({ clicked: function(e: Event): void { } }); accordion.appendTo(‘#ej2Accordion’); |
Common
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Collapsible |
Property: collapsible $(“#accordion”).ejAccordion({ collapsible: false }); |
Not Applicable |
Collapse speed |
Property: collapseSpeed $(“#accordion”).ejAccordion({ collapseSpeed: 500 }); |
Not Applicable |
Custom class |
Property: cssClass $(“#accordion”).ejAccordion({ cssClass: ‘custom’ }); |
Not Applicable |
CustomIcon class |
Property: customIcon $(“#accordion”).ejAccordion({ customIcon: { header: “header-close”, selectedHeader: “header-expand” } }); |
Not Applicable |
Enabled |
Property: enabled $(“#accordion”).ejAccordion({ enabled: false }); |
Not Applicable |
Events |
Property: events $(“#accordion”).ejAccordion({ events: “mouseover” }); |
Not Applicable |
Expand speed |
Property: expandSpeed $(“#accordion”).ejAccordion({ expandSpeed: 300 }); |
Not Applicable |
Height |
Property: height $(“#accordion”).ejAccordion({ height: 400 }); |
Property: height var accordion = new ej.navigations.Accordion({ height: 700 }); accordion.appendTo(‘#ej2Accordion’); |
HeightAdjustMode |
Property: heightAdjustMode $(“#accordion”).ejAccordion({ heightAdjustMode: “content” }); |
Not Applicable |
HtmlAttributes |
Property: htmlAttributes $(“#accordion”).ejAccordion({ htmlAttributes: { title: “Demo” } }); |
Not Applicable |
MultipleOpen |
Property: enableMultipleOpen $(“#accordion”).ejAccordion({ enableMultipleOpen: true }); |
Property: expandMode var accordion = new ej.navigations.Accordion({ expandMode: ‘Multiple’ }); accordion.appendTo(‘#ej2Accordion’); |
Persistence |
Property: enablePersistence $(“#accordion”).ejAccordion({ enablePersistence: false }); |
Property: enablePersistence var accordion = new ej.navigations.Accordion({ enablePersistence: true }); accordion.appendTo(‘#ej2Accordion’); |
ShowRounderCorner |
Property: showRoundedCorner $(“#accordion”).ejAccordion({ showRoundedCorner: false }); |
Not Applicable |
Width |
Property: width $(“#accordion”).ejAccordion({ width: 600 }); |
Property: width var accordion = new ej.navigations.Accordion({ width: 500 }); accordion.appendTo(‘#ej2Accordion’); |
Enable |
Method: enable() $(“#accordion”).ejAccordion(); var accordion = $(“#accordion”).data(“ejAccordion”); accordion.enable(); |
Not Applicable |
Disable |
Method: disable() $(“#accordion”).ejAccordion(); var accordion = $(“#accordion”).data(“ejAccordion”); accordion.disable(); |
Not Applicable |
Show |
Method: show() $(“#accordion”).ejAccordion(); var accordion = $(“#accordion”).data(“ejAccordion”); accordion.show(); |
Not Applicable |
Hide |
Method: hide() $(“#accordion”).ejAccordion(); var accordion = $(“#accordion”).data(“ejAccordion”); accordion.hide(); |
Not Applicable |
Destroy |
Method: destroy() $(“#accordion”).ejAccordion(); var accordion = $(“#accordion”).data(“ejAccordion”); accordion.destroy(); |
Method: destroy() var accordion = new ej.navigations.Accordion(); accordion.appendTo(‘#ej2Accordion’); accordion.destroy(); |
Refresh |
Method: refresh() $(“#accordion”).ejAccordion(); var accordion = $(“#accordion”).data(“ejAccordion”); accordion.refresh(); |
Method: refresh() var accordion = new ej.navigations.Accordion(); accordion.appendTo(‘#ej2Accordion’); accordion.refresh(); |
Created |
Event: create $(“#accordion”).ejAccordion({ create: function(args) {} }); |
Event: created var accordion = new ej.navigations.Accordion({ created: function(e: Event): void { } }); accordion.appendTo(‘#ej2Accordion’); |
Destroyed |
Event: destroy $(“#accordion”).ejAccordion({ destroy: function(args) {} }); |
Event: destroyed var accordion = new ej.navigations.Accordion({ destroyed: function(e: Event): void { } }); accordion.appendTo(‘#ej2Accordion’); |