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) {} |