Ej1 api migration in React Split button component

17 Mar 20258 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 */
}