Migration from Essential JS 1

17 Feb 20228 minutes to read

This article describes the API migration process of NumericTextBox component from Essential JS 1 to Essential JS 2.

Common

Behavior API in Essential JS 1 API in Essential JS 2
Triggers on creation Event Create

@Html.EJ().NumericTextbox(“numeric”).Value(120).ClientSideEvents(s => s.Create(“onCreate”))
Script
function onCreate(){}		 Event: Created

@Html.EJS().NumericTextBox(“numeric”).Value(120).Created(“onCreate”).Render()
Script
function onCreate(){}
Adding custom classes Property CssClass

@Html.EJ().NumericTextbox(“numeric”).Value(100).CssClass(“custom”)		 Property: CssClass

@Html.EJS().NumericTextBox(“numeric”).Value(100).CssClass(“custom”).Render()
Triggers when editor is destroyed Event Destroy

@Html.EJ().NumericTextbox(“numeric”).Value(120).ClientSideEvents(s => s.Destroy(“onDestroy”))
Script
function onDestroy(){}		 Event: Destroyed

@Html.EJS().NumericTextBox(“numeric”).Value(120).Destroyed(“onDestroy”).Render()
Script
function onDestroy(){}
Destroys textbox Method destroy

@Html.EJ().NumericTextbox(“numeric”).Value(100)
Script

var numericObj = $(“#numeric).data(“ejNumericTextbox”);
numericObj.destroy();		 Method: destroy

@Html.EJS().NumericTextBox(“numeric”).Value(100).Render()

Script

var numeric = document.getElementById(‘numeric’).ej2_instances[0]
numeric.destroy();
Control state Property Enabled

@Html.EJ().NumericTextbox(“numeric”).Value(100).Enabled(false)		 Property: Enabled

@Html.EJS().NumericTextBox(“numeric”).Value(100).Enabled(false).Render()
Persistence Property EnablePersistence

@Html.EJ().NumericTextbox(“numeric”).Value(100).EnablePersistence(true)		 Property: EnablePersistence

@Html.EJS().NumericTextBox(“numeric”).Value(100).EnablePersistence(true).Render()
Right To Left Property EnableRTL

@Html.EJ().NumericTextbox(“numeric”).Value(100).EnableRTL(true)		 Property: EnableRtl

@Html.EJS().NumericTextBox(“numeric”).Value(100).EnableRtl(true).Render()
Triggers when editor is focused in Event FocusIn

@Html.EJ().NumericTextbox(“numeric”).
Value(20).ClientSideEvents(s => s.FocusIn(“focusIn”))
Script
function focusIn(){}		 Event: Focus

@Html.EJS().NumericTextBox(“numeric”).Value(100).InputMode(InputMode.Text).Focus(“onFocus”)
Script
function onFocus(){}
Triggers when editor is focused out Event FocusOut

@Html.EJ().NumericTextbox(“numeric”).Value(100).
ClientSideEvents(s => s.FocusOut(“focusOut”))
Script
function focusOut(){}		 Event: Blur

@Html.EJS().NumericTextBox(“numeric”).Value(100).InputMode(InputMode.Text).Blur(“onBlur”)
Script
function onBlur(){}
Sets Height Property Height

@Html.EJ().NumericTextbox(“numeric”).Value(100).Height(“40px”)		 Can be achieved using,

@Html.EJS().NumericTextBox(“numeric”).Value(100).CssClass(“custom”).Render()
Css
.e-numerictextbox.custom{
height: 40px;
}
HTML Attributes Property HtmlAttributes

@Html.EJ().NumericTextbox(“numeric”).Value(100).HtmlAttributes(htmlAttr)

Script

@{
Dictionary<string, object> htmlAttr = new Dictionary<string, object>();
htmlAttr.Add(“disabled”, “disabled”);
}		 Can be achieved using
@Html.EJS().NumericTextBox(“numeric”).Min(10).Max(100).Created(“onCreate”).Render()
Script
function onCreate() {
document.getElementById(this.element.id).setAttribute(“name”, “numericRange”);
}
Name of editor Property name

@Html.EJ().NumericTextbox(“numeric”).Value(100).Name(“Textbox”)		 Can be achieved using
@Html.EJS().NumericTextBox(“numeric”).Min(10).Max(100).Created(“onCreate”).Render()
Script
function onCreate() {
document.getElementById(this.element.id).setAttribute(“name”, “numericRange”);
}
Read only Property ReadOnly

@Html.EJ().NumericTextbox(“numeric”).Value(80).ReadOnly(true)		 Property: ReadOnly

@Html.EJS().NumericTextBox(“numeric”).Value(80).ReadOnly(true).Render()
Rounded corners Property ShowRoundedCorner

@Html.EJ().NumericTextbox(“numeric”).Value(100).ShowRoundedCorner(true)		 Can be achieved using
@Html.EJS().NumericTextBox(“numeric”).Created(“onCreate”).FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Always).CssClass(“e-style”).Render()
Css
.e-control-wrapper.e-numeric.e-input-group.e-style {
border: solid 2.5px;
border-radius: 1rem;
padding-left: 12px;
}
.e-control-wrapper.e-numeric.e-input-group.e-style.e-input-focus {
border: solid grey 2.5px !important;
border-radius: 1rem;
}
.e-control-wrapper.e-numeric.e-float-input.e-style .e-float-line::before,.e-control-wrapper.e-numeric.e-float-input.e-style .e-float-line::after {
background: none;
}

.e-control-wrapper.e-numeric.e-input-group.e-style.e-input-focus{
border: solid grey !important;
}
Spin Button Property ShowSpinButton

@Html.EJ().NumericTextbox(“numeric”).Value(20).ShowSpinButton(true)		 Property: ShowSpinButton

@Html.EJS().NumericTextBox(“numeric”).Value(20).ShowSpinButton(false).Render()
Width Property Width

@Html.EJ().NumericTextbox(“numeric”).Value(20).width(“220px”)		 Property: Width

@Html.EJS().NumericTextBox(“numeric”).Value(20).Width(“220px”).Render()
Clear Button Not Applicable Property: ShowClearButton

@Html.EJS().NumericTextBox(“numeric”).Value(100).ShowClearButton(true).Render()

Globalization

Behavior API in Essential JS 1 API in Essential JS 2
Localization culture Property Locale

@Html.EJ().NumericTextbox(“numeric”).Value(80).Locale(“de-DE”)		 Property: Locale

@Html.EJS().NumericTextBox(“numeric”).Value(80).Locale(“de-DE”).Render()

Group

Behavior API in Essential JS 1 API in Essential JS 2
Group digits in editor Property GroupSize

@Html.EJ().NumericTextbox(“numeric”).Value(100).GroupSize(“2”)		 Not Applicable
Group Separator Property GroupSeparator

@Html.EJ().NumericTextbox(“numeric”).Value(100).GroupSeparator(“-“)		 Not Applicable

Numeric configuration

Behavior API in Essential JS 1 API in Essential JS 2
Triggers on value change Event Change

@Html.EJ().NumericTextbox(“numeric”).Value(120).
ClientSideEvents(s => s.Change(“onChange”))
Script
function onChange(){}		 Event: Change

@Html.EJS().NumericTextBox(“numeric”).Value(120).Change(“onChange”).Render()
Script
function onChange(){}
Sets digits allowed after decimal point Property DecimalPlaces

@Html.EJ().NumericTextbox(“numeric”).Value(100).DecimalPlaces(2)		 Property: Decimals

@Html.EJS().NumericTextBox(“numeric”).Value(100).Format(“n2”).Decimals(“2”).Render()
Decrement value Not Applicable Method: decrement

@Html.EJS().NumericTextBox(“numeric”).Value(100).Render()

Script

var numeric = document.getElementById(‘numeric’).ej2_instances[0]
numeric.decrement();
Disable the textbox Method disable

@Html.EJ().NumericTextbox(“numeric”).Value(200)
Script

var numericObj = $(“#numeric).data(“ejNumericTextbox”);
numericObj.disable();		 Can be achieved using
@Html.EJS().NumericTextBox(“numeric”).Min(10).Max(100).Created(“onCreate”).Render()
Script
function onCreate() {
var numeric = this;
numeric.enabled = false;
}
Enable the textbox Method enable

@Html.EJ().NumericTextbox(“numeric”).Value(200)
Script

var numericObj = $(“#numeric).data(“ejNumericTextbox”);
numericObj.enable();		 Can be achieved using
@Html.EJS().NumericTextBox(“numeric”).Min(10).Max(100).Created(“onCreate”).Render()
Script
function onCreate() {
var numeric = this;
numeric.enabled = true;
}
Gets value of editor Method getValue

@Html.EJ().NumericTextbox(“numeric”).Value(100)
Script

var numericObj = $(“#numeric).data(“ejNumericTextbox”);
numericObj.getValue();		 Method: getText

@Html.EJS().NumericTextBox(“numeric”).Value(100).Render()

Script

var numeric = document.getElementById(‘numeric’).ej2_instances[0]
numeric.getText();
Increment value Not Applicable Method: increment

@Html.EJS().NumericTextBox(“numeric”).Value(80).Render()

Script

var numeric = document.getElementById(‘numeric’).ej2_instances[0]
numeric.increment();
Step value Property IncrementStep

@Html.EJ().NumericTextbox(“numeric”).Value(100).IncrementStep(2)		 Property: Step

@Html.EJS().NumericTextBox(“numeric”).Value(100).Step(2).Render()
Sets Maximum value Property *MaxValue

@Html.EJ().NumericTextbox(“numeric”).Value(100).MaxValue(200)		 Property: Max

@Html.EJS().NumericTextBox(“numeric”).Value(100).Max(200).Render()
Sets Minimum value Property MinValue

@Html.EJ().NumericTextbox(“numeric”).Value(100).MinValue(20)		 Property: Min

@Html.EJS().NumericTextBox(“numeric”).Value(100).Min(20).Render()
Negative pattern for formatting values Property NegativePattern

@Html.EJ().NumericTextbox(“numeric”).Value(-20).NegativePattern(“( n)”)		 Not Applicable
Positive pattern for formatting values Property PositivePattern

@Html.EJ().NumericTextbox(“numeric”).Value(20).PositivePattern(“n kg”)		 Not Applicable
Specifies value Property Value

@Html.EJ().NumericTextbox(“numeric”).Value(100)		 Property: value

@Html.EJS().NumericTextBox(“numeric”).Value(100).Render()
Displays hint on editor Property WatermarkText

@Html.EJ().NumericTextbox(“numeric”).Value(80).WatermarkText(“Enter value”)		 Property: Placeholder

@Html.EJS().NumericTextBox(“numeric”).Value(100).Placeholder(“Enter value”).Render()
Placeholder float type Not Applicable Property: FloatLabelType

@Html.EJS().NumericTextBox(“numeric”).Value(200).Placeholder(“Enter value”).FloatLabelType(“Auto”).Render()

Number Formats

Behavior API in Essential JS 1 API in Essential JS 2
Set Currency symbol Property CurrencySymbol

@Html.EJ().CurrencyTextbox(“currency”).Value(100).CurrencySymbol(“EUR”)		 Property: Currency

@Html.EJS().NumericTextBox(“numeric”).Format(“c2”).Value(100).Currency(“EUR”).Render()
Number Format Not Applicable Property: Format

@Html.EJS().NumericTextBox(“numeric”).Format(“n2”).Value(200).Render()

Validation

Behavior API in Essential JS 1 API in Essential JS 2
Strict Mode Property EnableStrictMode

@Html.EJ().NumericTextbox(“numeric”).Value(80).EnableStrictMode(true)		 Property: StrictMode

@Html.EJS().NumericTextBox(“numeric”).StrictMode(true).Value(80).Render()
Validation on typing Property ValidateOnType

@Html.EJ().NumericTextbox(“numeric”).Value(100).ValidateOnType(true)		 Property: ValidateDecimalOnType

@Html.EJS().NumericTextBox(“numeric”).ValidateDecimalOnType(true).Value(100).Render()
Validation Message Property ValidationMessage

@Html.EJ().NumericTextbox(“numeric”).Value(100).ValidationRules(rule => rule.AddRule(“required”, true)).ValidationMessage(msg => msg.AddMessage(“required”, “Required value”))		 Can be achieved using
<form id=”form-element”>
@Html.EJS().NumericTextBox(“numeric”).Min(10).Max(100).Placeholder(“Enter the number”).Change(“onChange”).Created(“onCreate”).StrictMode(false).Render()
</form>
function onCreate() {
document.getElementById(this.element.id).setAttribute(“name”, “numericRange”);
}
function onChange() {
if (numeric.value != null) {
formObject.validate(“numericRange”);
}
var options = {
rules: {
‘numericRange’: { required: [true, “Number is required”] },
},
};
var formObject = new ej.inputs.FormValidator(‘#form-element’, options);
formObject.customPlacement = function (element, errorElement) {
element.parentNode.parentNode.appendChild(errorElement);
};
Validation Rules Property ValidationRules

@Html.EJ().NumericTextbox(“numeric”).Value(100).ValidationRules(rule => rule.AddRule(“required”, true))		 Can be achieved using
<form id=”form-element”>
@Html.EJS().NumericTextBox(“numeric”).Min(10).Max(100).Placeholder(“Enter the number”).Change(“onChange”).Created(“onCreate”).StrictMode(false).Render()
</form>
function onCreate() {
document.getElementById(this.element.id).setAttribute(“name”, “numericRange”);
}
function onChange(args) {
if (numeric.value != null) {
formObject.validate(“numericRange”);
}
var options = {
rules: {
‘numericRange’: { required: [true] },
},
};
var formObject = new ej.inputs.FormValidator(‘#form-element’, options);
formObject.customPlacement = function (element, errorElement) {
element.parentNode.parentNode.appendChild(errorElement);
};