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 <ejs-splitbutton id="splitbutton" content="Paste"></ejs-splitbutton> |
Popup content | Property: target <ej-splitbutton id="splitbutton" text="SplitButton" target="#target"></ej-splitbutton> |
Property: target <ejs-splitbutton id="splitbutton" target="#target" content="SplitButton"></ejs-splitbutton> |
Popup items | Not applicable | Property: items <ejs-splitbutton id="splitbutton" content="Paste" [items]="items"></ejs-splitbutton> items: ItemModel[] = [ { 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 <ejs-splitbutton id="splitbutton" content="Paste" [items]="items" iconCss="e-icons e-paste"></ejs-splitbutton> |
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 <ejs-splitbutton id="splitbutton" content="Paste" [items]="items" iconCss="e-icons e-paste" iconPosition="Top"></ejs-splitbutton> |
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 <ejs-splitbutton id="splitbutton" [items]="items" cssClass="custom-class"></ejs-splitbutton> |
Disabled state | Property: enabled <ej-splitbutton id="splitbutton" text="login" target="#target" [enabled]="false"></ej-splitbutton> |
Property: disabled <ejs-splitbutton id="splitbutton" (items)="items" [disabled]="true"></ejs-splitbutton> |
RTL | Property: enableRTL <ej-splitbutton id="splitbutton" text="login" target="#target" contentType="TextAndImage" prefixIcon="e-icon e-handup" [enableRTL]="true"></ej-splitbutton> |
Property: enableRtl <ejs-splitbutton id="splitbutton" [items]="items" content="Paste" [enableRtl]="true" iconCss="e-icons e-paste"></ejs-splitbutton> |
Height | Property: height <ej-splitbutton id="splitbutton" text="login" target="#target" height="30px"></ej-splitbutton> |
Not applicable |
Width | Property: width <ej-splitbutton id="splitbutton" text="login" target="#target" width="100px"></ej-splitbutton> |
Not applicable |
HTML attributes | Property: htmlAttributes <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 <ejs-splitbutton id="splitbutton" [items]="items" content="Small" cssClass="e-small"></ejs-splitbutton> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Destroy method | Method: destroy <ej-splitbutton #split id="splitbutton" text="SplitButton" target="#target"></ej-splitbutton> @ViewChild(‘split’) public splitButton: SplitButtonComponent; this.splitButton.destroy(); |
Method: destroy <ejs-splitbutton #split id="splitbutton" [items]="items" content="SplitButton"></ejs-splitbutton> @ViewChild(‘split’) public splitButton: SplitButtonComponent; this.splitButton.destroy(); |
Disable method | Method: disable <ej-splitbutton #split id="splitbutton" text="SplitButton" target="#target"></ej-splitbutton> @ViewChild(‘split’) public splitButton: SplitButtonComponent; this.splitButton.disable(); |
Not applicable |
Enable method | Method: enable <ej-splitbutton #split id="splitbutton" text="SplitButton" target="#target"></ej-splitbutton> @ViewChild(‘split’) public splitButton: SplitButtonComponent; this.splitButton.enable(); |
Not applicable |
Hide popup | Method: hide <ej-splitbutton #split id="splitbutton" text="SplitButton" target="#target"></ej-splitbutton> @ViewChild(‘split’) public splitButton: SplitButtonComponent; this.splitButton.hide(); |
Method: toggle <ejs-splitbutton #split id="splitbutton" [items]="items" content="SplitButton"></ejs-splitbutton> @ViewChild(‘split’) public splitButton: SplitButtonComponent; this.splitButton.toggle(); |
Show popup | Method: show <ej-splitbutton #split id="splitbutton" text="SplitButton" target="#target"></ej-splitbutton> @ViewChild(‘split’) public splitButton: SplitButtonComponent; this.splitButton.show(); |
Method: toggle <ejs-splitbutton #split id="splitbutton" [items]="items" content="SplitButton"></ejs-splitbutton> @ViewChild(‘split’) public splitButton: SplitButtonComponent; 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($event)"></ej-splitbutton> beforeOpen(args) { /** code block */ } |
Event: beforeOpen <ejs-splitbutton id="splitbutton" [items]="items" content="SplitButton" (beforeOpen)="beforeOpen($event)"></ejs-splitbutton> beforeOpen(args) { /** code block */ } |
Click event | Event: click <ej-splitbutton id="splitbutton" text="SplitButton" target="#target" (click)="click($event)"></ej-splitbutton> click(args) { /** code block */ } |
Event: click <ejs-splitbutton id="splitbutton" [items]="items" content="SplitButton" (click)="click($event)"></ejs-splitbutton> click(args) { /** code block */ } |
Close event | Event: close <ej-splitbutton id="splitbutton" text="SplitButton" target="#target" (close)="close($event)"></ej-splitbutton> close(args) { /** code block */ } |
Event: close <ejs-splitbutton id="splitbutton" [items]="items" content="SplitButton" (close)="close($event)"></ejs-splitbutton> close(args) { /** code block */ } |
Create event | Event: create <ej-splitbutton id="splitbutton" text="SplitButton" target="#target" (create)="create($event)"></ej-splitbutton> create(args) { /** code block */ } |
Event: created <ejs-splitbutton id="splitbutton" [items]="items" content="SplitButton" (created)="created()"></ejs-splitbutton> created() { /** code block */ } |
Destroy event | Event: destroy <ej-splitbutton id="splitbutton" text="SplitButton" target="#target" (destroy)="destroy($event)"></ej-splitbutton> destroy(args) { /** code block */ } |
Not applicable |
ItemMouseOut event | Event: itemMouseOut <ej-splitbutton id="splitbutton" text="SplitButton" target="#target" (itemMouseOut)="itemMouseOut($event)"></ej-splitbutton> itemMouseOut(args) { /** code block */ } |
Not applicable |
ItemMouseOver event | Event: itemMouseOver <ej-splitbutton id="splitbutton" text="SplitButton" target="#target" (itemMouseOver)="itemMouseOver($event)"></ej-splitbutton> itemMouseOver(args) { /** code block */ } |
Not applicable |
Item select event | Event: itemSelected <ej-splitbutton id="splitbutton" text="SplitButton" target="#target" (itemSelected)="itemSelected($event)"></ej-splitbutton> itemSelected(args) { /** code block */ } |
Event: select <ejs-splitbutton id="splitbutton" [items]="items" content="SplitButton" (select)="select($event)"></ejs-splitbutton> select(args) { /** code block */ } |
Open event | Event: open <ej-splitbutton id="splitbutton" text="SplitButton" target="#target" (open)="open($event)"></ej-splitbutton> open(args) { /** code block */ } |
Event: open <ejs-splitbutton id="splitbutton" [items]="items" content="SplitButton" (open)="open($event)"></ejs-splitbutton> open(args) { /** code block */ } |
BeforeClose event | Not applicable | Event: beforeClose <ejs-splitbutton id="splitbutton" [items]="items" content="SplitButton" (beforeClose)="beforeClose($event)"></ejs-splitbutton> beforeClose(args) { /** code block */ } |
BeforeItemRender event | Not applicable | Event: beforeItemRender <ejs-splitbutton id="splitbutton" [items]="items" content="SplitButton" (beforeItemRender)="beforeItemRender($event)"></ejs-splitbutton> beforeItemRender(args) { /** code block */ } |