Migration from Essential JS 1

17 Feb 20225 minutes to read

This article describes the API migration process of Button 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 button Property: text

@Html.EJ().Button("btn").Text("Button") 		Property: content

@Html.EJS().Button("btn").Content("Button").Render()
Specifies the content type of the button Property: ContentType

@Html.EJ().Button("btn").Text("Save").ContentType(ContentType.TextAndImage).PrefixIcon("e-icon e-save") 		Not applicable
Specifies icon for the button Property: prefixIcon

@Html.EJ().Button("btn").ContentType(ContentType.ImageOnly).PrefixIcon("e-icon e-save") 		Property: iconCss

@Html.EJS().Button("btn").IconCss("e-icons e-save").Render()
Positioning icon in the button Property: imagePosition

@Html.EJ().Button("btn").Text("Save").ContentType(ContentType.TextAndImage).PrefixIcon("e-icon e-save").ImagePosition(ImagePosition.ImageRight) 		Property: iconPosition

@Html.EJS().Button("btn").Content("Save").IconCss("e-icons e-save").IconPosition(Syncfusion.EJ2.Buttons.IconPosition.Right).Render()
Specifies secondary icon for the button Property: suffixIcon

@Html.EJ().Button("btn").Text("Save").ContentType(ContentType.TextAndImage).PrefixIcon("e-icon e-save").SuffixIcon("e-icon e-file-html") 		Not applicable
Adding custom class Property: cssClass

@Html.EJ().Button("btn").Text("Button").Size(ButtonSize.Small).CssClass("custom-class") 		Property: cssClass

@Html.EJS().Button("btn").Content("Button").CssClass("custom-class").Render()
Specifies the size of the button Property: size

@Html.EJ().Button("btn").Text("Button").Size(ButtonSize.Small) 		Property: cssClass

@Html.EJS().Button("btn").Content("Button").CssClass("e-small").Render()
Triggers click event repeatedly while pressing the button Property: repeatButton

@Html.EJ().Button("btn").Text("Click").RepeatButton(true) 		Not applicable
Sets time interval between two consecutive click event on the repeat button Property: timeInterval

@Html.EJ().Button("btn").Text("Click").RepeatButton(true).TimeInterval("100") 		Not applicable
Specifies the type of the button Property: type

@Html.EJ().Button("btn").Text("Submit").Type(ButtonType.Submit) 		Not applicable
Changes normal button into rounded corner Property: showRoundedCorner

@Html.EJ().Button("btn").Text("Button").ShowRoundedCorner(true) 		Not applicable
Specifies the width of the button Property: width

@Html.EJ().Button("btn").Text("Button").Width("150px") 		Not applicable
Specifies the height of the button Property: height

@Html.EJ().Button("btn").Text("Button").Height("50px") 		Not applicable
Adds HTML attributes to the button Property: htmlAttributes

@Html.EJ().Button("btn").Text("Button").HtmlAttributes("") 		Not applicable
Allows the appearance of the Button to be enhanced and visually appealing Not applicable Property: isPrimary

@Html.EJS().Button("btn").Content("Button").IsPrimary(true).Render()
Makes the button toggle from normal to active state Property: isToggle

Not applicable		 Property: isToggle

@Html.EJS().Button("btn").Content("Button").IsToggle(true).Render()
Specifies the disabled state of the button Property: enabled

@Html.EJ().Button("btn").Text("Button").Enabled(false) 		Property: disabled

@Html.EJS().Button("btn").Content("Button").Disabled(true).Render()
Enable or disable rendering component in right to left direction Property: enableRTL

@Html.EJ().Button("btn").Text("Save").ContentType(ContentType.TextAndImage).PrefixIcon("e-icon e-save").EnableRtl(true) 		Property: enableRtl

@Html.EJS().Button("btn").Content("Save")IconCss("e-icon e-save").EnableRtl(true).Render()

Methods

Behavior API in Essential JS 1 API in Essential JS 2
Destroys the control Methods: destroy

@Html.EJ().Button("btn").Text("Button")
var btnObj = $(“#btn”).data(“ejButton”);
btnObj.destroy();		 Methods: destroy

@Html.EJS().Button("btn").Content("Button").Render()
var btnObj = document.getElementById(“btn”).ej2_instances[0];
btnObj.destroy();
Disables the button Methods: disable

@Html.EJ().Button("btn").Text("Button")
var btnObj = $(“#btn”).data(“ejButton”);
btnObj.disable();		 Not applicable
Enables the button Methods: enable

@Html.EJ().Button("btn").Text("Button")
var btnObj = $(“#btn”).data(“ejButton”);
btnObj.enable();		 Not applicable

Events

Behavior API in Essential JS 1 API in Essential JS 2
Triggers while clicking the button Events: click

@Html.EJ().Button("btn").Text("Button").Click("btnClick")
function btnClick(args) {
/** code block */
}		 Not applicable
Triggers once the component rendering is completed Events: create

@Html.EJ().Button("btn").Text("Button").ClientSideEvents(e => e.Create("create")
function create(args) {
/** code block */
}		 Events: created

@Html.EJS().Button("btn").Content("Button").Created("created").Render()
function created() {
/** code block */
}
Triggers once the component is destroyed Events: destroy

@Html.EJ().Button("btn").Text("Button").Destroy("destroy")
function destroy(args) {
/** code block */
}		 Not applicable