React
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

Migration from Essential JS 1 in React Accordion component

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