Ej1 api migration in React Accordion component

4 Apr 20257 minutes to read

This article describes the API migration process of Accordion component from Essential^® JS 1 to Essential^® JS 2.

Accessibility and Localization

|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> |

AjaxSettings

|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 |

Animation

|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’ }};} |

Items

|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 |

Common

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