Migration from Essential® JS 1

8 Dec 20249 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

<ej-numeric-text-box id="numeric" value="120" create="onCreate" />
Script
function onCreate(){} 		Event: created

<ejs-numerictextbox id="numeric" created="onCreate" value="120"></ejs-numerictextbox>
Script
function onCreate(){}
Adding custom classes Property: css-class

<ej-numeric-text-box id="numeric" value="100" css-class="custom" /> 		Property: cssClass

<ejs-numerictextbox id="numeric" cssClass="custom" value="100"></ejs-numerictextbox>
Triggers when editor is destroyed Event: destroy

<ej-numeric-text-box id="numeric" value="120" destroy="onDestroy" />
Script
function onDestroy(){} 		Event: destroyed

<ejs-numerictextbox id="numeric" destroyed="onDestroy" value="120"></ejs-numerictextbox>
Script
function onDestroy(){}
Destroys textbox Method: destroy

<ej-numeric-text-box id="numeric" value="100"/>
Script

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

<ejs-numerictextbox id="numeric" created="onCreate" value="100"></ejs-numerictextbox>

Script

function onCreate(){
var numeric = this;
}
numeric.destroy();
Control state Property: enabled

<ej-numeric-text-box id="numeric" value="100" enabled=false /> 		Property: enabled

<ejs-numerictextbox id="numeric" enabled=false value="100"></ejs-numerictextbox>
Persistence Property: enable-persistence

<ej-numeric-text-box id="numeric" value="100" enable-persistence=true /> 		Property: enablePersistence

<ejs-numerictextbox id="numeric" enablePersistence=true value="100"></ejs-numerictextbox>
Right To Left Property: enable-rtl

<ej-numeric-text-box id="numeric" value="100" enable-rtl=true /> 		Property: enableRtl

<ejs-numerictextbox id="numeric" enableRtl=true value="100"></ejs-numerictextbox>
Triggers when editor is focused in Event: focus-in

<ej-numeric-text-box id="numeric" value="20" focus-in="focusIn" />
Script
function focusIn(){} 		Event: focus

<ejs-numerictextbox id="numeric" value="100" focus="onFocus" ></ejs-numerictextbox>

Script

function onFocus(){}
Triggers when editor is focused out Event: focusOut

<ej-numeric-text-box id="numeric" value="100" focus-out="focusOut" />
Script
function focusOut(){} 		Event: blur

<ejs-numerictextbox id="numeric" value="100" blur="onBlur" ></ejs-numerictextbox>

Script

function onBlur(){}
Sets Height Property: height

<ej-numeric-text-box id="numeric" value="100" height="40px" /> 		Can be achieved using,

<ejs-numerictextbox id="numeric" cssClass="custom" value="100"></ejs-numerictextbox>
Css
.e-numerictextbox.custom{
height: 40px;
}
HTML Attributes Property: html-attributes

<ej-numeric-text-box id="numeric" value="100" html-attributes="htmlAttr"/>

Script

@{
Dictionary<string, object> htmlAttr = new Dictionary<string, object>();
htmlAttr.Add("disabled", "disabled");
}		 Can be achieved using
<ejs-numerictextbox id="numeric" created="onCreate" value="100"></ejs-numerictextbox>
Script
function onCreate{
this.element.setAttribute{"name","textbox'}
}
Name of editor Property: name

<ej-numeric-text-box id="numeric" value="100" name="Textbox"/> 		Can be achieved using
<ejs-numerictextbox id="numeric" name="numerictextbox" value="100"></ejs-numerictextbox>
Read only Property: read-only

<ej-numeric-text-box id="numeric" value="80" read-only=true /> 		Property: readonly

<ejs-numerictextbox id="numeric" readonly=true value="80"></ejs-numerictextbox>
Rounded corners Property: show-rounded-corner

<ej-numeric-text-box id="numeric" value="100" show-rounded-corner=true /> 		Can be achieved using
<ejs-numerictextbox id="numeric" cssClass="e-style" floatLabelType="Always" value="100"></ejs-numerictextbox>
CSS
.e-control-wrapper.e-numeric.e-input-group.e-style {
border: 2.5px solid;
border-radius: 1rem;
padding-left: 12px;
}
.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: show-spin-button

<ej-numeric-text-box id="numeric" value="20" show-spin-button=false /> 		Property: showSpinButton

<ejs-numerictextbox id="numeric" showSpinButton=false value="20"></ejs-numerictextbox>
Width Property: width

<ej-numeric-text-box id="numeric" value="20" width="220px" /> 		Property: width

<ejs-numerictextbox id="numeric" width="220px" value="20"></ejs-numerictextbox>
Clear Button Not Applicable Property: showClearButton

<ejs-numerictextbox id="numeric" showClearButton=true value="100"></ejs-numerictextbox>

Globalization

Behavior API in Essential® JS 1 API in Essential® JS 2
Localization culture Property: locale

<ej-numeric-text-box id="numeric" value="80" locale="de-DE" /> 		Property: locale

<ejs-numerictextbox id="numeric" locale="de-DE" value="80"></ejs-numerictextbox>

Group

Behavior API in Essential® JS 1 API in Essential® JS 2
Group digits in editor Property: group-size

<ej-numeric-text-box id="numeric" value="100" group-size="2" /> 		Not Applicable
Group Separator Property: group-separator

<ej-numeric-text-box id="numeric" value="100" group-separator="-" /> 		Not Applicable

Numeric configuration

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

<ej-numeric-text-box id="numeric" value="120" change="onChange" />
Script
function onChange(){} 		Event: change

<ejs-numerictextbox id="numeric" change="onChange" value="120"></ejs-numerictextbox>
Script
function onChange(){}
Sets digits allowed after decimal point Property: decimal-places

<ej-numeric-text-box id="numeric" value="100" decimal-places=2 /> 		Property: decimals

<ejs-numerictextbox id="numeric" format="n2" decimals="2" value="100"></ejs-numerictextbox>
Decrement value Not Applicable Method: decrement

<ejs-numerictextbox id="numeric" created="onCreate" value="100"></ejs-numerictextbox>

Script

function onCreate(){
var numeric = this;
}
numeric.decrement();
Disable the textbox Method: disable

<ej-numeric-text-box id="numeric" value="200"/>
Script

var numericObj = $(“#numeric).data("ejNumericTextbox");
numericObj.disable(); 		Can be achieved using
<ejs-numerictextbox id="numeric" created="onCreate" value="100"></ejs-numerictextbox>
Script
function onCreate(){
var numeric = this;
}
numeric.enabled = false;
Enable the textbox Method: enable

<ej-numeric-text-box id="numeric" value="200"/>
Script

var numericObj = $(“#numeric).data("ejNumericTextbox");
numericObj.enable(); 		Can be achieved using
<ejs-numerictextbox id="numeric" created="onCreate" value="100"></ejs-numerictextbox>
Script
function onCreate(){
var numeric = this;
}
numeric.enabled = true;
Gets value of editor Method: getValue

<ej-numeric-text-box id="numeric" value="100"/>
Script

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

<ejs-numerictextbox id="numeric" created="onCreate" value="100"></ejs-numerictextbox>

Script

function onCreate(){
var numeric = this;
}
numeric.getText();
Increment value Not Applicable Method: increment

<ejs-numerictextbox id="numeric" created="onCreate" value="80"></ejs-numerictextbox>

Script

function onCreate(){
var numeric = this;
}
numeric.increment();
Step value Property: increment-step

<ej-numeric-text-box id="numeric" value="100" increment-step=2 /> 		Property: step

<ejs-numerictextbox id="numeric" decimals="2" value="100" step="2"></ejs-numerictextbox>
Sets Maximum value Property: max-value

<ej-numeric-text-box id="numeric" value="100" max-value="200" /> 		Property: max

<ejs-numerictextbox id="numeric" max="200" value="100"></ejs-numerictextbox>
Sets Minimum value Property: min-value

<ej-numeric-text-box id="numeric" value="100" min-value="200" /> 		Property: min

<ejs-numerictextbox id="numeric" min="20" value="100"></ejs-numerictextbox>
Negative pattern for formatting values Property: negative-pattern

<ej-numeric-text-box id="numeric" value="-20" negative-pattern="( n)" /> 		Not Applicable
Positive pattern for formatting values Property: positive-pattern

<ej-numeric-text-box id="numeric" value="20" positive-pattern="n kg" /> 		Not Applicable
Specifies value Property: value

<ej-numeric-text-box id="numeric" value="100" /> 		Property: value

<ejs-numerictextbox id="numeric" value="100"></ejs-numerictextbox>
Displays hint on editor Property: watermark-text

<ej-numeric-text-box id="numeric" value="80" watermark-text="Enter value" /> 		Property: placeholder

<ejs-numerictextbox id="numeric" placeholder="Enter value" value="100"></ejs-numerictextbox>
Placeholder float type Not Applicable Property: floatLabelType

<ejs-numerictextbox id="numeric" placeholder="Enter value" value="200" floatLabelType="Auto">

Number Formats

Behavior API in Essential® JS 1 API in Essential® JS 2
Set Currency symbol Property: currency-symbol

<ej-currency-text-box id="currency" value="100" currency-symbol="EUR" /> 		Property: currency

<ejs-numerictextbox id="currency" format="c2" value="100" currency="EUR">
Number Format Not Applicable Property: format

<ejs-numerictextbox id="numeric" format="n2" value="200">

Validation

Behavior API in Essential® JS 1 API in Essential® JS 2
Strict Mode Property: enable-strict-mode

<ej-numeric-text-box id="numeric" value="80" enable-strict-mode=true /> 		Property: strictMode

<ejs-numerictextbox id="numeric" strictMode=true value="80">
Validation on typing Property: validate-on-type

<ej-numeric-text-box id="numeric" value="100" validate-on-type=true /> 		Property: validateDecimalOnType

<ejs-numerictextbox id="numeric" validateDecimalOnType=true value="100">
Validation Message Property: validation-message

<ej-numeric-text-box id="numeric" value="100" validation-rules="rule" validation-message="messages"/>

Script

@{
Dictionary<string, object> rule = new Dictionary<string, object>();
rule.Add("required",true);
Dictionary<string, object> messages = new Dictionary<string, object>();
messages.Add("required", "Required value");
} 		Validation in NumericTextBox can be achieved using
<form id="form-element">
<div>
<ejs-numerictextbox id="numeric" min="10" max="100" change="onChange" created="onCreate" strictMode="false" width="250px"></ejs-numerictextbox>
</div>
</form>
Script
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, "Enter valid number"] },
},
};
var formObject = new ej.inputs.FormValidator('#form-element', options);
formObject.customPlacement = function (element, errorElement) {
element.parentNode.parentNode.appendChild(errorElement);
};
Validation Rules Property: validation-rules

<ej-numeric-text-box id="numeric" value="100" validation-rules="rule" />

Script

@{
Dictionary<string, object> rule = new Dictionary<string, object>();
rule.Add("required",true);
} 		Validation in NumericTextBox can be achieved using
<form id="form-element">
<div>
<ejs-numerictextbox id="numeric" min="10" max="100" change="onChange" created="onCreate" strictMode="false" width="250px"></ejs-numerictextbox>
</div>
</form>
Script
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] },
},
};
var formObject = new ej.inputs.FormValidator('#form-element', options);
formObject.customPlacement = function (element, errorElement) {
element.parentNode.parentNode.appendChild(errorElement);
};