This article describes the API migration process of SplitButton component from Essential JS 1 to Essential JS 2.
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> |
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(); } |
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 */ } |