This article describes the API migration process of Accordion component from Essential JS 1 to Essential JS 2.
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Keyboard Navigation | Property : allowKeyboardNavigation<ej-accordion id="Accordion" [allowKeyboardNavigation]="false" ></ej-accordion> |
Not Applicable |
| Localization | Not Applicable | Property : locale<ejs-accordion id="Accordion" locale="fr-BE" ></ejs-accordion> |
| Right to left | Property: enableRTL<ej-accordion id="Accordion" [enableRTL]="true"></ej-accordion> |
Property: enableRTL<ejs-accordion id="Accordion" [enableRTL]="true"> </ejs-accordion> |
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Default | Property : ajaxSettings<ej-accordion id="accordion" [ajaxSettings.type]="GET"></ej-accordion> |
Not Applicable |
| Asynchronous | Property : ajaxSettings.async <ej-accordion id="accordion" [ajaxSettings.async]="true "></ej-accordion> |
Not Applicable |
| Browser Cache | Property: ajaxSettings.cache<ej-accordion id="accordion" [ajaxSettings.cache]="false "></ej-accordion> |
Not Applicable |
| Request type | Property : ajaxSettings.contentType<ej-accordion id="accordion" [ajaxSettings.contentType]="html "></ej-accordion> |
Not Applicable |
| Data | Property : ajaxSettings.data<ej-accordion id="accordion" [ajaxSettings.data]={}></ej-accordion> |
Not Applicable |
| Response type | Property : ajaxSettings.dataType <ej-accordion id="accordion" [ajaxSettings.dataType]="html"></ej-accordion> |
Not Applicable |
| HTTP request type | Property: ajaxSettings.type<ej-accordion id="accordion" [ajaxSettings.type]="GET"></ej-accordion> |
Not Applicable |
| AjaxBeforeLoad | Event: ajaxBeforeLoad<ej-accordion id='accordion' (ajaxBeforeLoad)='onajaxBeforeLoad($event)'></ej-accordion>TS: onajaxBeforeLoad (event){} |
Not Applicable |
| AjaxError | Event: ajaxError<ej-accordion id='accordion' (ajaxError)='onajaxError($event)'></ej-accordion>TS: onajaxError (event){} |
Not Applicable |
| AjaxLoad | Event: ajaxLoad<ej-accordion id='accordion' (ajaxLoad)='onajaxLoad($event)'></ej-accordion>TS: onajaxLoad (event){} |
Not Applicable |
| AjaxSuccess | Event: ajaxSuccess<ej-accordion id='accordion' (ajaxSuccess)='onajaxSuccess ($event)'></ej-accordion>TS: onajaxSuccess (event){} |
Not Applicable |
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Default | Not Applicable | Property :animation<ejs-accordion id='accordion' [animation]="animation"></ejs-accordion>TS: public animation: Object[] = [{collapse: { effect: ‘FlipXDownIn’, duration: 600, easing: ‘ease’ }, expand: { effect: ‘FlipXUpIn’, duration: 600, easing: ‘ease’ }}] |
| EnableAnimation | Property :animation<ej-accordion id="Accordion" [enableAnimation]="false"></ej-accordion> |
Not Applicable |
| Expand animation | Not Applicable | Property :animation.expand<ejs-accordion id='accordion' [animation]="animation"></ejs-accordion>TS: public animation: Object[] = [{expand: { effect: ‘SlideLeft’, duration: 600, easing: ‘ease-in’ }}] |
| Collapse animation | Not Applicable | Property :animation.collapse<ejs-accordion id='accordion' [animation]="animation"></ejs-accordion>TS: public animation: Object[] = [{collapse: { effect: ‘SlideLeft’, duration: 600, easing: ‘ease-in’ }}] |
| Duration [expand / collapse] | Not Applicable | Property :animation.collapse.duration<ejs-accordion id='accordion' [animation]="animation"></ejs-accordion>TS: public animation: Object[] = [{expand: { duration: 600 }}] |
| Easing [expand / collapse] | Not Applicable | Property :animation.collapse.easing<ejs-accordion id='accordion' [animation]="animation"></ejs-accordion>TS: public animation: Object[] = [{expand: { easing: ‘ease-in’ }}] |
| Effect [expand / collapse] | Not Applicable | Property :animation.collapse.effect<ejs-accordion id='accordion' [animation]="animation"></ejs-accordion>TS: public animation: Object[] = [{expand: { effect: ‘SlideLeft’ }}] |
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Default | Not Applicable | Property : items<ejs-accordion id="Accordion" [items]="items"> </ejs-accordion> |
| Content | Not Applicable | Property : items[0].content <ejs-accordion id="Accordion" [items]="items"> </ejs-accordion>TS: public items: Object[] = [{ content: ‘Contents’}]; |
| Custom class | Not Applicable | Property : items[0].cssClass <ejs-accordion id="Accordion" [items]="items"> </ejs-accordion>TS: public items: Object[] = [{ cssClass: ‘customClass’}]; |
| Header | Not Applicable | Property : items[0].Header <ejs-accordion id="Accordion" [items]="items"> </ejs-accordion>TS: public items: Object[] = [{ header: ‘Header1’}]; |
| HeaderSize | Property : items[0].headerSize <ej-accordion id="Accordion" headerSize="50px" ></ej-accordion> |
Not Applicable |
| Icon class | Not Applicable | Property : items[0].iconCss <ejs-accordion id="Accordion" [items]="items"> </ejs-accordion>TS: public items: Object[] = [{ iconCss: ‘e-icons’ }]; |
| IsExpand | Not Applicable | Property : items[0].expanded <ejs-accordion id="Accordion" [items]="items"> </ejs-accordion>TS: public items: Object[] = [{ expanded: true }]; |
| Collapse Item | Method : collapsePanel(index) <ej-accordion id="Accordion" #Accordion></ej-accordion>TS: @ViewChild(‘Accordion’) public AccordionObj: AccordionComponent; AccordionObj.collapsePanel(0); |
Method : expandItem(index, false) <ejs-accordion id="Accordion" [items]="items"> </ejs-accordion>TS: @ViewChild(‘Accordion’) public AccordionObj: AccordionComponent; AccordionObj.expandItem(0, false); |
| Expand Item | Method : expandPanel(index) <ej-accordion id="Accordion" #Accordion></ej-accordion>TS: @ViewChild(‘Accordion’) public AccordionObj: AccordionComponent; AccordionObj.expandPanel(0); |
Method :expandItem(index, true) <ejs-accordion id="Accordion" [items]="items"> </ejs-accordion>TS: @ViewChild(‘Accordion’) public AccordionObj: AccordionComponent; AccordionObj.expandItem(0, true); |
| CollapseAll | Method : collapseAll() <ej-accordion id="Accordion" #Accordion></ej-accordion>TS: @ViewChild(‘Accordion’) public AccordionObj: AccordionComponent; AccordionObj.collapseAll(); |
Not Applicable |
| ExpandAll | Method : expandAll() <ej-accordion id="Accordion" #Accordion></ej-accordion>TS: @ViewChild(‘Accordion’) public AccordionObj: AccordionComponent; AccordionObj.expandAll(); |
Not Applicable |
| Get ItemsCount | Method : getItemsCount() <ej-accordion id="Accordion" #Accordion></ej-accordion>TS: @ViewChild(‘Accordion’) public AccordionObj: AccordionComponent; AccordionObj.getItemsCount(); |
Not Applicable |
| AddItem | Method : addItem(text, content, index) <ej-accordion id="Accordion" #Accordion></ej-accordion>TS: @ViewChild(‘Accordion’) public AccordionObj: AccordionComponent; AccordionObj.addItem(“New item”, “The accordion content”, 2); |
Method : addItem(items, index) <ejs-accordion id="Accordion" [items]="items"> </ejs-accordion>TS: @ViewChild(‘Accordion’) public AccordionObj: AccordionComponent; AccordionObj.addItem([{ header: ‘App’, content: ‘text’ }], 0); |
| Remove Item | Method : removeItem(index) <ej-accordion id="Accordion" #Accordion></ej-accordion>TS: @ViewChild(‘Accordion’) public AccordionObj: AccordionComponent; AccordionObj.removeItem(0); |
Method : removeItem(index) <ejs-accordion id="Accordion" [items]="items"> </ejs-accordion>TS: @ViewChild(‘Accordion’) public AccordionObj: AccordionComponent; AccordionObj.removeItem(index); |
| Disable Items | Property : disabledItems <ej-accordion id="Accordion" disabledItems="[0, 1]"></ej-accordion> |
Not Applicable |
| Enable Items | Property : enabledItems <ej-accordion id="Accordion" enabledItems="[0, 1]"></ej-accordion> |
Not Applicable |
| Disable Item | Method : disableItems([index]) <ej-accordion id="Accordion" #Accordion></ej-accordion>TS: @ViewChild(‘Accordion’) public AccordionObj: AccordionComponent; AccordionObj.disableItems([1]); |
Method : enableItem(index, false) <ejs-accordion id="Accordion" #Accordion></ejs-accordion>TS: @ViewChild(‘Accordion’) public AccordionObj: AccordionComponent; AccordionObj.enableItem(0, false); |
| Enable Item | Method : enableItems([index]) <ej-accordion id="Accordion" #Accordion></ej-accordion>TS: @ViewChild(‘Accordion’) public AccordionObj: AccordionComponent; AccordionObj.enableItems([1]); |
Method : enableItem(index, true) <ejs-accordion id="Accordion" #Accordion></ejs-accordion>TS: @ViewChild(‘Accordion’) public AccordionObj: AccordionComponent; AccordionObj.enableItem(0, true); |
| Hide Item | Not Applicable | Method : hideItem(index, true) <ejs-accordion id="Accordion" #Accordion></ejs-accordion>TS: @ViewChild(‘Accordion’) public AccordionObj: AccordionComponent; AccordionObj.hideItem(0, true) |
| SelectedItemIndex | Property : selectedItemIndex <ej-accordion id="Accordion" #Accordion [selectedItemIndex]="false"></ej-accordion> |
Not Applicable |
| Select | Not Applicable | Method : select(index) <ejs-accordion id="Accordion" #Accordion></ejs-accordion>TS: @ViewChild(‘Accordion’) public AccordionObj: AccordionComponent; AccordionObj.select(0); |
| BeforeActivate | Event: beforeActivate<ej-accordion id='accordion' (beforeActivate)='onbeforeActivate($event)'></ej-accordion>TS: onbeforeActivate(event){} |
Event: expanding<ejs-accordion id="Accordion" #Accordion (expanding)='onexpanding($event)'></ejs-accordion>TS: onexpanding(event){} |
| Activate | Event: activate<ej-accordion id='accordion' (activate)='onActivate($event)'></ej-accordion>TS: onActivate(event){} |
Event: expanded <ejs-accordion id="Accordion" #Accordion (expanded )='onexpanded($event)'></ejs-accordion>TS: onexpanded(event){} |
| beforeInActivate | Event: beforeInactivate <ej-accordion id='accordion' (beforeInactivate)='onbeforeInactivate($event)'></ej-accordion>TS: onbeforeInactivate(event){} |
Not Applicable |
| InActive | Event: inActivate <ej-accordion id=‘accordion’ (inActivate)=‘onInActivate($event)‘>` TS: onInActivate(event){} | Not Applicable |
|
| Clicked | Event: clicked<ejs-accordion id="Accordion" #Accordion (clicked)='onclicked($event)'></ejs-accordion>TS: onclicked (event){} |
Not Applicable |
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Collapsible | Property : collapsible <ej-accordion id="Accordion" [collapsible]="false"> </ej-accordion> |
Not Applicable |
| Collapse speed | Property : collapseSpeed <ej-accordion id="Accordion" collapseSpeed="500"> </ej-accordion> |
Not Applicable |
| Custom class | Property : cssClass <ej-accordion id="Accordion" cssClass="custom" > </ej-accordion> |
Not Applicable |
| CustomIcon class | Property: customIcon<ej-accordion id="Accordion" customIcon="custom" > </ej-accordion>TS: public custom: Object = {header: “header-close”, selectedHeader: “header-expand”}; |
Not Applicable |
| Enabled | Property : enabled <ej-accordion id="Accordion" enabled="false" > </ej-accordion> |
Not Applicable |
| Events | Property : events <ej-accordion id="Accordion" events="mouseover" > </ej-accordion> |
Not Applicable |
| Expand speed | Property : expandSpeed <ej-accordion id="Accordion" expandSpeed="300" > </ej-accordion> |
Not Applicable |
| Height | Property : height <ej-accordion id="Accordion" height="400" > </ej-accordion> |
Property : height <ejs-accordion id="Accordion" height="400" > </ejs-accordion> |
| HeightAdjustMode | Property : heightAdjustMode <ej-accordion id="Accordion" heightAdjustMode="content" > </ej-accordion> |
Not Applicable |
| HtmlAttributes | Property : htmlAttributes <ej-accordion id="Accordion" [htmlAttributes]="attributes" > </ej-accordion>TS: public attributes: Object = {title: “Demo”}; |
Not Applicable |
| MultipleOpen | Property : enableMultipleOpen <ej-accordion id="Accordion" [enableMultipleOpen]="true" > </ej-accordion> |
Property : expandMode <ejs-accordion id="Accordion" [expandMode]="Multiple" > </ejs-accordion> |
| Persistence | Property : enablePersistence <ej-accordion id="Accordion" [enablePersistence]="false" > </ej-accordion> |
Property : enablePersistence <ejs-accordion id="Accordion" [enablePersistence]="true" > </ejs-accordion> |
| ShowRounderCorner | Property : showRoundedCorner <ej-accordion id="Accordion" [showRoundedCorner]="false" > </ej-accordion> |
Not Applicable |
| Width | Property : width <ej-accordion id="Accordion" [width]="600" > </ej-accordion> |
Property : width <ejs-accordion id="Accordion" [width]="400" > </ejs-accordion> |
| Enable | Method : enable() <ej-accordion id="Accordion" #Accordion></ej-accordion>TS: @ViewChild(‘Accordion’) public AccordionObj: AccordionComponent; AccordionObj.enable(); |
Not Applicable |
| Disable | Method : disable() <ej-accordion id="Accordion" #Accordion></ej-accordion>TS: @ViewChild(‘Accordion’) public AccordionObj: AccordionComponent; AccordionObj.disable(); |
Not Applicable |
| Show | Method : show() <ej-accordion id="Accordion" #Accordion></ej-accordion>TS: @ViewChild(‘Accordion’) public AccordionObj: AccordionComponent; AccordionObj.show(); |
Not Applicable |
| Hide | Method : hide() <ej-accordion id="Accordion" #Accordion></ej-accordion>TS: @ViewChild(‘Accordion’) public AccordionObj: AccordionComponent; AccordionObj.hide(); |
Not Applicable |
| Destroy | Method : destroy() <ej-accordion id="Accordion" #Accordion></ej-accordion>TS: @ViewChild(‘Accordion’) public AccordionObj: AccordionComponent; AccordionObj.destroy(); |
Method : destroy() <ejs-accordion id="Accordion" #Accordion></ejs-accordion>TS: @ViewChild(‘Accordion’) public AccordionObj: AccordionComponent; AccordionObj.destroy(); |
| Refresh | Method : refresh() <ej-accordion id="Accordion" #Accordion></ej-accordion>TS: @ViewChild(‘Accordion’) public AccordionObj: AccordionComponent; AccordionObj.refresh(); |
Method : refresh() <ejs-accordion id="Accordion" #Accordion></ejs-accordion>TS: @ViewChild(‘Accordion’) public AccordionObj: AccordionComponent; AccordionObj.refresh(); |
| Created | Event: create<ej-accordion id="Accordion" #Accordion (create)='oncreate($event)'></ej-accordion>TS: oncreate(event) {} |
Event: created<ejs-accordion id="Accordion" #Accordion (created)='oncreated($event)'></ejs-accordion>TS: oncreated(event) {} |
| Destroyed | Event: destroy<ej-accordion id="Accordion" #Accordion (destroy)='ondestroy($event)'></ej-accordion>TS: ondestroy(event) {} |
Event: destroyed<ejs-accordion id="Accordion" #Accordion (destroyed)='ondestroyed($event)'></ejs-accordion>TS: ondestroyed(event) {} |