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