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<AccordionComponent id="Accordion" locale="fr-BE" ></AccordionComponent> |
| Right to left | Property: enableRTL<EJ.Accordion id="Accordion" enableRTL={true} ></EJ.Accordion> |
Property: enableRTL<AccordionComponent id="Accordion" enableRTL={true}> </AccordionComponent> |
| 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={this.onajaxBeforeLoad}></EJ.Accordion>onajaxBeforeLoad (event){ } |
Not Applicable |
| AjaxError | Event: AjaxError<EJ.Accordion id='accordion' ajaxError={this.onajaxError}></EJ.Accordion>onajaxError (event){} |
Not Applicable |
| AjaxLoad | Event: ajaxLoad<EJ.Accordion id='accordion' ajaxLoad={this.onajaxLoad}></EJ.Accordion>onajaxLoad (event){} |
Not Applicable |
| AjaxSuccess | Event: ajaxSuccess<EJ.Accordion id='accordion' ajaxSuccess={this.onajaxSuccess}></EJ.Accordion>onajaxSuccess (event){} |
Not Applicable |
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Default | Not Applicable | Property :animation<AccordionComponent id='accordion' animation={this.animation}></AccordionComponent>constructor(props: {}) { this.animation = {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<AccordionComponent id='accordion'animation={this.animation}></AccordionComponent>constructor(props: {}) { this.animation = { expand: { effect: ‘FlipXUpIn’, duration: 600, easing: ‘ease’ }};} |
| Collapse animation | Not Applicable | Property :animation.collapse<AccordionComponent id='accordion'animation={this.animation}></AccordionComponent>constructor(props: {}) { this.animation = { collapse: { effect: ‘SlideLeft’, duration: 600, easing: ‘ease-in’ }};} |
| Duration [expand / collapse] | Not Applicable | Property :animation.collapse.duration<AccordionComponent id='accordion'animation={this.animation}></AccordionComponent>constructor(props: {}) { this.animation = { expand: { duration: 600 }};} |
| Easing [expand / collapse] | Not Applicable | Property :animation.collapse.easing<AccordionComponent id='accordion'animation={this.animation}></AccordionComponent>constructor(props: {}) { this.animation = { expand: { easing: ‘ease-in’ }};} |
| Effect [expand / collapse] | Not Applicable | Property :animation.collapse.effect<AccordionComponent id='accordion'animation={this.animation}></AccordionComponent>constructor(props: {}) { this.animation = { expand: { effect: ‘SlideLeft’ }};} |
| Behavior | Property in Essential JS 1 | Property in Essential JS 2 |
|---|---|---|
| Default | Not Applicable | Property : items<AccordionComponent id="Accordion" items={this.items}> </AccordionComponent> |
| Content | Not Applicable | Property : items[0].content <AccordionComponent id="Accordion"items={this.items}> </AccordionComponent>constructor(props: {}) { this.items = {content: ‘Contents’};} |
| Custom class | Not Applicable | Property : items[0].cssClass <AccordionComponent id="Accordion"items={this.items}> </AccordionComponent>constructor(props: {}) { this.items = { cssClass: ‘customClass’};} |
| Header | Not Applicable | Property : items[0].Header <AccordionComponent id="Accordion"items={this.items}> </AccordionComponent>constructor(props: {}) { this.items = { 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 <AccordionComponent id="Accordion"items={this.items}> </AccordionComponent>constructor(props: {}) { this.items = { iconCss: ‘e-icons’};} |
| IsExpand | Not Applicable | Property : items[0].expanded <AccordionComponent id="Accordion"items={this.items}> </AccordionComponent>constructor(props: {}) { this.items = { expanded: true };} |
| Collapse Item | Method : collapsePanel(index) <EJ.Accordion id="Accordion" #Accordion></EJ.Accordion>var obj=$(‘#Accordion’).ejAccordion(‘instance’) obj.collapsePanel(0); |
Method : expandItem(index, false) <AccordionComponent id="Accordion" items={this.items} ref = {(scope) => {this.AccordionObj = scope}}> </AccordionComponent>constructor(props: {}) { this.AccordionObj.expandItem(0, false); } |
| Expand Item | Method : expandPanel(index) <EJ.Accordion id="Accordion" #Accordion></EJ.Accordion>var obj=$(‘#Accordion’).ejAccordion(‘instance’) obj.expandPanel(0); |
Method :expandItem(index, true) <AccordionComponent id="Accordion" ref = {(scope) => {this.AccordionObj = scope}} items={this.items}> </AccordionComponent>constructor(props: {}) { this.AccordionObj.expandItem(0, true); } |
| CollapseAll | Method : collapseAll() <EJ.Accordion id="Accordion" #Accordion></EJ.Accordion>var obj=$(‘#Accordion’).ejAccordion(‘instance’) obj.collapseAll(); |
Not Applicable |
| ExpandAll | Method : expandAll() <EJ.Accordion id="Accordion" #Accordion></EJ.Accordion>var obj=$(‘#Accordion’).ejAccordion(‘instance’) obj.expandAll(); |
Not Applicable |
| Get ItemsCount | Method : getItemsCount() <EJ.Accordion id="Accordion" #Accordion></EJ.Accordion>var obj=$(‘#Accordion’).ejAccordion(‘instance’) obj.getItemsCount(); |
Not Applicable |
| AddItem | Method : addItem(text, content, index) <EJ.Accordion id="Accordion" #Accordion></EJ.Accordion>var obj=$(‘#Accordion’).ejAccordion(‘instance’) obj.addItem(“New item”, “The accordion content”, 2); |
Method : addItem(items, index) <AccordionComponent id="Accordion"items={this.items}> </AccordionComponent>constructor(props: {}) { this.AccordionObj.addItem([{ header: ‘App’, content: ‘text’ }], 0); } |
| Remove Item | Method : removeItem(index) <EJ.Accordion id="Accordion" #Accordion></EJ.Accordion>var obj=$(‘#Accordion’).ejAccordion(‘instance’) obj.removeItem(0); |
Method : removeItem(index) <AccordionComponent id="Accordion"items={this.items}> </AccordionComponent>constructor(props: {}) { this.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>var obj=$(‘#Accordion’).ejAccordion(‘instance’) obj.disableItems([1]); |
Method : enableItem(index, false) <AccordionComponent id="Accordion" ref = {(scope) => {this.AccordionObj = scope}}></AccordionComponent>constructor(props: {}) { this.AccordionObj.enableItem(0, false); } |
| Enable Item | Method : enableItems([index]) <EJ.Accordion id="Accordion" #Accordion></EJ.Accordion>var obj=$(‘#Accordion’).ejAccordion(‘instance’) obj.enableItems([1]); |
Method : enableItem(index, true) <AccordionComponent id="Accordion" ref = {(scope) => {this.AccordionObj = scope}}></AccordionComponent>constructor(props: {}) { this.AccordionObj.enableItem(0, true); |
| Hide Item | Not Applicable | Method : hideItem(index, true) <AccordionComponent id="Accordion" ref = {(scope) => {this.AccordionObj = scope}}></AccordionComponent>constructor(props: {}) { this.AccordionObj.hideItem(0, true); } |
| SelectedItemIndex | Property : selectedItemIndex <EJ.Accordion id="Accordion" #Accordion selectedItemIndex={false}></EJ.Accordion> |
Not Applicable |
| Select | Not Applicable | Method : select(index) <AccordionComponent id="Accordion" ref = {(scope) => {this.AccordionObj = scope}}></AccordionComponent>constructor(props: {}) { this.AccordionObj.select(0); } |
| BeforeActivate | Event: beforeActivate<EJ.Accordion id='accordion' beforeActivate={this.onbeforeActivate}></EJ.Accordion>onbeforeActivate(event){} |
Event: expanding<AccordionComponent id="Accordion" ref = {(scope) => {this.AccordionObj = scope}} expanding={this.onexpanding.bind(this)}></AccordionComponent>onexpanding(event){} |
| Activate | Event: activate<EJ.Accordion id='accordion' activate={this.onActivate}'></EJ.Accordion>onActivate(event){} |
Event: expanded <AccordionComponent id="Accordion" ref = {(scope) => {this.AccordionObj = scope}} expanded={onexpanded.bind(this)}></AccordionComponent>onexpanded(event){} |
| beforeInActivate | Event: beforeInactivate <EJ.Accordion id='accordion' beforeInactivate={this.onbeforeInactivate}></EJ.Accordion>onbeforeInactivate(event){} |
Not Applicable |
| InActive | Event: inActivate<EJ.Accordion id='accordion' inActivate={this.onInActivate}></EJ.Accordion>onInActivate(event){} |
Not Applicable |
| Clicked | Event: clicked<EJ.Accordion id='accordion' clicked={this.onclicked}></EJ.Accordion>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={this.custom} > </EJ.Accordion>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 <AccordionComponent id="Accordion" height="400" > </AccordionComponent> |
| HeightAdjustMode | Property : heightAdjustMode <EJ.Accordion id="Accordion" heightAdjustMode="content" > </EJ.Accordion> |
Not Applicable |
| HtmlAttributes | Property : htmlAttributes <EJ.Accordion id="Accordion" [htmlAttributes]="attributes" > </EJ.Accordion>public attributes: Object = {title: “Demo”}; |
Not Applicable |
| MultipleOpen | Property : enableMultipleOpen <EJ.Accordion id="Accordion" enableMultipleOpen={true} > </EJ.Accordion> |
Property : expandMode <AccordionComponent id="Accordion" [expandMode]="Multiple" > </AccordionComponent> |
| Persistence | Property : enablePersistence <EJ.Accordion id="Accordion" enablePersistence={false} > </EJ.Accordion> |
Property : enablePersistence <AccordionComponent id="Accordion" enablePersistence={true} > </AccordionComponent> |
| 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 <AccordionComponent id="Accordion" [width]="400" > </AccordionComponent> |
| Enable | Method : enable() <EJ.Accordion id="Accordion" #Accordion></EJ.Accordion>@ViewChild(‘Accordion’) var obj=$(‘#Accordion’).ejAccordion(‘instance’) obj.enable(); |
Not Applicable |
| Disable | Method : disable() <EJ.Accordion id="Accordion" #Accordion></EJ.Accordion>var obj=$(‘#Accordion’).ejAccordion(‘instance’) obj.disable(); |
Not Applicable |
| Show | Method : show() <EJ.Accordion id="Accordion" #Accordion></EJ.Accordion>var obj=$(‘#Accordion’).ejAccordion(‘instance’) obj.show(); |
Not Applicable |
| Hide | Method : hide() <EJ.Accordion id="Accordion" #Accordion></EJ.Accordion>var obj=$(‘#Accordion’).ejAccordion(‘instance’) obj.hide(); |
Not Applicable |
| Destroy | Method : destroy() <EJ.Accordion id="Accordion" #Accordion></EJ.Accordion>var obj=$(‘#Accordion’).ejAccordion(‘instance’) obj.destroy(); |
Method : destroy() <AccordionComponent id="Accordion" ref = {(scope) => {this.AccordionObj = scope}}></AccordionComponent>constructor(props: {}) { this.AccordionObj.destroy(); |
| Refresh | Method : refresh() <EJ.Accordion id="Accordion" #Accordion></EJ.Accordion>var obj=$(‘#Accordion’).ejAccordion(‘instance’) obj.refresh(); |
Method : refresh() <AccordionComponent id="Accordion" ref = {(scope) => {this.AccordionObj = scope}}></AccordionComponent>constructor(props: {}) { this.AccordionObj.refresh(); |
| Created | Event: create<EJ.Accordion id="Accordion" #Accordion create={this.oncreate}></EJ.Accordion>oncreate(event) {} |
Event: created<AccordionComponent id="Accordion" ref = {(scope) => {this.AccordionObj = scope}} created={this.oncreated.bind(this)}></AccordionComponent>oncreated(event) {} |
| Destroyed | Event: destroy<EJ.Accordion id="Accordion" #Accordion destroy={this.ondestroy}></EJ.Accordion>ondestroy(event) {} |
Event: destroyed<AccordionComponent id="Accordion" ref = {(scope) => {this.AccordionObj = scope}} (destroyed)={this.ondestroyed.bind(this)}'></AccordionComponent>ondestroyed(event) {} |