Ej1 api migration in React Split button component
30 Jan 20238 minutes to read
This article describes the API migration process of SplitButton component from Essential JS 1 to Essential JS 2.
Properties
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Specifies the text of the splitbutton |
Property: text <EJ.SplitButton id="splitbutton" text="login"></EJ.SplitButton>
|
Property: content <SplitButtonComponent id="splitbutton" content="Paste"></SplitButtonComponent>
|
Popup content |
Property: target <EJ.SplitButton id="splitbutton" text="SplitButton" target="#target"></EJ.SplitButton>
|
Property: target <SplitButtonComponent id="splitbutton" target="#target" content="SplitButton" ></SplitButtonComponent>
|
Popup items | Not applicable |
Property: items <SplitButtonComponent id="splitbutton" content="Paste" items={this.items}></SplitButtonComponent> constructor(props: {}) { this.items = [ { text: ‘Cut’ }, { text: ‘Copy’ }, { text: ‘Paste’ }]; } |
Arrow position |
Property: arrowPosition <EJ.SplitButton id="splitbutton" text="login" target="#target" arrowPosition="left"></EJ.SplitButton>
|
Not applicable |
Button mode |
Property: buttonMode <EJ.SplitButton id="splitbutton" text="login" target="#target" buttonMode="dropdown"></EJ.SplitButton>
|
Not applicable |
Content type |
Property: contentType <EJ.SplitButton id="splitbutton" text="login" contentType="textonly" target="#target"></EJ.SplitButton>
|
Not applicable |
Icons |
Property: prefixIcon <EJ.SplitButton id="splitbutton" text="login" contentType="textandimage" prefixIcon="e-icon e-handup" target="#target"></EJ.SplitButton>
|
Property: iconCss <SplitButtonComponent id="splitbutton" content="Paste" items={this.items} iconCss="e-icons e-paste"></SplitButtonComponent>
|
Icon position |
Property: imagePosition <EJ.SplitButton id="splitbutton" text="login" contentType="textandimage" prefixIcon="e-icon e-handup" target="#target" imagePosition="imagetop"></EJ.SplitButton>
|
Property: iconPosition <SplitButtonComponent id="splitbutton" content="Paste" items={this.items} iconCss="e-icons e-paste" iconPosition="Top"></SplitButtonComponent>
|
Secondary icon |
Property: suffixIcon <EJ.SplitButton id="splitbutton" text="login" contentType="imagetextimage" prefixIcon="e-icon e-handup" suffixIcon="e-icon e-palette" target="#target"></EJ.SplitButton>
|
Not applicable |
Adding custom class |
Property: cssClass <EJ.SplitButton id="splitbutton" text="SplitButton" target="#target" cssClass="custom-class"></EJ.SplitButton>
|
Property: cssClass <SplitButtonComponent id="splitbutton" items={this.items} cssClass="custom-class"></SplitButtonComponent>
|
Disabled state |
Property: enabled <EJ.SplitButton id="splitbutton" text="login" target="#target" enabled={false}></EJ.SplitButton>
|
Property: disabled <SplitButtonComponent id="splitbutton" items={this.items} disabled={true}></SplitButtonComponent>
|
RTL |
Property: enableRTL <EJ.SplitButton id="splitbutton" text="login" target="#target" contentType="textandimage" prefixIcon="e-icon e-handup" enableRTL={true}></EJ.SplitButton>
|
Property: enableRtl <SplitButtonComponent id="splitbutton" items={this.items} content="Paste" enableRtl={true} iconCss="e-icons e-paste"></SplitButtonComponent>
|
Height |
Property: height <EJ.SplitButton id="splitbutton" text="login" target="#target" height="30"></EJ.SplitButton>
|
Not applicable |
Width |
Property: width <EJ.SplitButton id="splitbutton" text="login" target="#target" width="100"></EJ.SplitButton>
|
Not applicable |
HTML attributes |
Property: htmlAttributes var attributes = { disabled:”disabled” }; <EJ.SplitButton id="splitbutton" text="login" target="#target" htmlAttributes="attributes"></EJ.SplitButton>
|
Not applicable |
Show rounded corner |
Property: showRoundedCorner <EJ.SplitButton id="splitbutton" text="login" target="#target" showRoundedCorner={true}></EJ.SplitButton>
|
Not applicable |
Size |
Property: size <EJ.SplitButton id="splitbutton" size="small" text="Small" target="#target"></EJ.SplitButton>
|
Property: cssClass <SplitButtonComponent id="splitbutton" items={this.items} content="Small" cssClass="e-small"></SplitButtonComponent>
|
Methods
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Destroy method |
Method: destroy <EJ.SplitButton id="splitbutton" text="SplitButton" target="#target"></EJ.SplitButton> var splitButton = $(‘#splitbutton’).ejSplitButton(‘instance’); splitButton.destroy(); |
Method: destroy <SplitButtonComponent id="splitbutton" items={this.items} content="SplitButton" ref={(scope) => {this.splitButton = scope}></SplitButtonComponent> constructor(props: {}) { this.splitButton.destroy(); } |
Disable method |
Method: disable <EJ.SplitButton id="splitbutton" text="SplitButton" target="#target"></EJ.SplitButton> var splitButton = $(‘#splitbutton’).ejSplitButton(‘instance’); splitButton.disable(); |
Not applicable |
Enable method |
Method: enable <EJ.SplitButton id="splitbutton" text="SplitButton" target="#target"></EJ.SplitButton> var splitButton = $(‘#splitbutton’).ejSplitButton(‘instance’); splitButton.enable(); |
Not applicable |
Hide popup |
Method: hide <EJ.SplitButton id="splitbutton" text="SplitButton" target="#target"></EJ.SplitButton> var splitButton = $(‘#splitbutton’).ejSplitButton(‘instance’); splitButton.hide(); |
Method: toggle <SplitButtonComponent id="splitbutton" items={this.items} content="SplitButton" ref={(scope) => {this.splitButton = scope}></SplitButtonComponent> constructor(props: {}) { this.splitButton.toggle(); } |
Show popup |
Method: show <EJ.SplitButton id="splitbutton" text="SplitButton" target="#target"></EJ.SplitButton> var splitButton = $(‘#splitbutton’).ejSplitButton(‘instance’); splitButton.show(); |
Method: toggle <SplitButtonComponent id="splitbutton" items={this.items} content="SplitButton" ref={(scope) => {this.splitButton = scope}></SplitButtonComponent> constructor(props: {}) { this.splitButton.toggle(); } |
Events
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
BeforeOpen event |
Event: beforeOpen <EJ.SplitButton id="splitbutton" text="SplitButton" target="#target" beforeOpen={beforeOpen}></EJ.SplitButton> function beforeOpen(args) { /** code block */ } |
Event: beforeOpen <SplitButtonComponent id="splitbutton" items={this.items} content="SplitButton" beforeOpen={this.beforeOpen.bind(this)}></SplitButtonComponent> beforeOpen(args) { /** code block */ } |
Click event |
Event: click <EJ.SplitButton id="splitbutton" text="SplitButton" target="#target" click={click}></EJ.SplitButton> function click(args) { /** code block */ } |
Event: click <SplitButtonComponent id="splitbutton" items={this.items} content="SplitButton" click={this.click.bind(this)}></SplitButtonComponent> click(args) { /** code block */ } |
Close event |
Event: close <EJ.SplitButton id="splitbutton" text="SplitButton" target="#target" close={close}></EJ.SplitButton> function close(args) { /** code block */ } |
Event: close <SplitButtonComponent id="splitbutton" items={this.items} content="SplitButton" close={this.close.bind(this)}></SplitButtonComponent> close(args) { /** code block */ } |
Create event |
Event: create <EJ.SplitButton id="splitbutton" text="SplitButton" target="#target" create={create}></EJ.SplitButton> function create(args) { /** code block */ } |
Event: created <SplitButtonComponent id="splitbutton" items={this.items} content="SplitButton" created={this.created.bind(this)}></SplitButtonComponent> created() { /** code block */ } |
Destroy event |
Event: destroy <EJ.SplitButton id="splitbutton" text="SplitButton" target="#target" destroy={destroy}></EJ.SplitButton> function destroy(args) { /** code block */ } |
Not applicable |
ItemMouseOut event |
Event: itemMouseOut <EJ.SplitButton id="splitbutton" text="SplitButton" target="#target" itemMouseOut={itemMouseOut}></EJ.SplitButton> function itemMouseOut(args) { /** code block */ } |
Not applicable |
ItemMouseOver event |
Event: itemMouseOver <EJ.SplitButton id="splitbutton" text="SplitButton" target="#target" itemMouseOver={itemMouseOver}></EJ.SplitButton> function itemMouseOver(args) { /** code block */ } |
Not applicable |
Item select event |
Event: itemSelected <EJ.SplitButton id="splitbutton" text="SplitButton" target="#target" itemSelected={itemSelected}></EJ.SplitButton> function itemSelected(args) { /** code block */ } |
Event: select <SplitButtonComponent id="splitbutton" items={this.items} content="SplitButton" select={this.select.bind(this)}></SplitButtonComponent> select(args) { /** code block */ } |
Open event |
Event: open <EJ.SplitButton id="splitbutton" text="SplitButton" target="#target" open={open}></EJ.SplitButton> function open(args) { /** code block */ } |
Event: open <SplitButtonComponent id="splitbutton" items={this.items} content="SplitButton" open={this.open.bind(this)}></SplitButtonComponent> function open(args) { /** code block */ } |
BeforeClose event | Not applicable |
Event: beforeClose <SplitButtonComponent id="splitbutton" items={this.items} content="SplitButton" beforeClose={this.beforeClose.bind(this)}></SplitButtonComponent> beforeClose(args) { /** code block */ } |
BeforeItemRender event | Not applicable |
Event: beforeItemRender <SplitButtonComponent id="splitbutton" items={this.items} content="SplitButton" beforeItemRender={this.beforeItemRender.bind(this)}></SplitButtonComponent> beforeItemRender(args) { /** code block */ } |