Search results

Migration from Essential JS 1

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