Ej1 api migration in EJ2 JavaScript Numerictextbox control

8 May 20239 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

$(“#numeric”).ejNumericTextBox({
value: 120,
create: function(){}
});		 Event: created

var numeric = new ej.inputs.NumericTextBox({
value: 120,
created: function(){}
});
numeric.appendTo(“#numeric”);
Adding custom classes property: cssClass

$(“#numeric”).ejNumericTextBox({
value: 100,
cssClass: “custom”
});		 Property: cssClass

var numeric = new ej.inputs.NumericTextBox({
value: 100,
cssClass: “custom”
});
numeric.appendTo(“#numeric”);
Triggers when editor is destroyed Event: destroy

$(“#numeric”).ejNumericTextBox({
value: 120,
destroy: function(){}
});		 Event: destroyed

var numeric = new ej.inputs.NumericTextBox({
value: 120,
destroyed: function(){}
});
numeric.appendTo(“#numeric”);
Destroys textbox Method: destroy

$(“#numeric”).ejNumericTextBox({
value: 100
});
var numericObj = $(“#numeric”).data(“ejNumericTextBox”);
numericObj.destroy();		 Method: destroy

var numeric = new ej.inputs.NumericTextBox({
value: 100,
enabled: false
});
numeric.appendTo(“#numeric”);
numeric.destroy();
Control state property: enabled

$(“#numeric”).ejNumericTextBox({
value: 100,
enabled: false
});		 Property: enabled

var numeric = new ej.inputs.NumericTextBox({
value: 100,
enabled: false
});
numeric.appendTo(“#numeric”);
Persistence property: enablePersistence

$(“#numeric”).ejNumericTextBox({
value: 100,
enablePersistence: true
});		 Property: enablePersistence

var numeric = new ej.inputs.NumericTextBox({
value: 100,
enablePersistence: true
});
numeric.appendTo(“#numeric”);
Right To Left property: enableRTL

$(“#numeric”).ejNumericTextBox({
value: 100,
enableRTL: true
});		 Property: enableRtl

var numeric = new ej.inputs.NumericTextBox({
value: 100,
enableRtl: true
});
numeric.appendTo(“#numeric”);
Triggers when editor is focused in Event: focusIn

$(“#numeric”).ejNumericTextBox({
value: 20,
focusIn: function(){}
});		 Event: focus

var numeric = new ej.inputs.NumericTextBox({
value: 100,
focus: function() {}
});
numeric.appendTo(“#numeric”);
Triggers when editor is focused out Event: focusOut

$(“#numeric”).ejNumericTextBox({
value: 100,
focusOut: function(){}
});		 Event: blur

var numeric = new ej.inputs.NumericTextBox({
value: 100,
blur: function() {}
});
numeric.appendTo(“#numeric”);
Sets Height property: height

$(“#numeric”).ejNumericTextBox({
value: 100,
height: “40px”
});		 Can be achieved using,

var numeric = new ej.inputs.NumericTextBox({
value: 100,
cssClass: “custom”
});
numeric.appendTo(“#numeric”);
Css
.e-numerictextbox.custom{
height: 40px;
}
HTML Attributes property: htmlAttributes

$(“#numeric”).ejNumericTextBox({
value: 100,
htmlAttributes: {disabled: “disabled”}
});		 Can be achieved using,

<input id=”numeric” type=”text” name=”textbox” />
var numeric = new ej.inputs.NumericTextBox({
value: 100
});
numeric.appendTo(“#numeric”)
Name of editor property: name

$(“#numeric”).ejNumericTextBox({
value: 100,
name: “Textbox”
});		 Can be achieved using,

HTML
<input id=”numeric” type=”text” name=”textbox” />
var numeric = new ej.inputs.NumericTextBox({
value: 100,
});
numeric.appendTo(“#numeric”);
Read only property: readOnly

$(“#numeric”).ejNumericTextBox({
value: 80,
readOnly: true
});		 Property: readonly

var numeric = new ej.inputs.NumericTextBox({
value: 80,
readonly: true
});
numeric.appendTo(“#numeric”);
Rounded corners property: showRoundedCorner

$(“#numeric”).ejNumericTextBox({
value: 80,
showRoundedCorner: true
});		 Can be achieved using
var numeric = new ej.inputs.NumericTextBox({
value: 100,
cssClass: “e-style”
});
numeric.appendTo(“#numeric”);
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: showSpinButton

$(“#numeric”).ejNumericTextBox({
value: 20,
showSpinButton: false
});		 Property: showSpinButton

var numeric = new ej.inputs.NumericTextBox({
value: 20,
showSpinButton: false
});
numeric.appendTo(“#numeric”);
Width property: width

$(“#numeric”).ejNumericTextBox({
value: 20,
width: “220px”
});		 Property: width

var numeric = new ej.inputs.NumericTextBox({
value: 20,
width: “220px”
});
numeric.appendTo(“#numeric”);
Clear Button Not Applicable Property: showClearButton

var numeric = new ej.inputs.NumericTextBox({
value: 100,
showClearButton: true
});
numeric.appendTo(“#numeric”);

Globalization

Behavior API in Essential JS 1 API in Essential JS 2
Localization culture property: locale

$(“#numeric”).ejNumericTextBox({
value: 80,
locale: “de-DE”
});		 Property: locale

var numeric = new ej.inputs.NumericTextBox({
value: 80,
locale: “de-DE”
});
numeric.appendTo(“#numeric”);

Group

Behavior API in Essential JS 1 API in Essential JS 2
Group digits in editor property: groupSize

$(“#numeric”).ejNumericTextBox({
value: 100,
groupSize: “2”
});		 Not Applicable
Group Separator property: groupSeparator

$(“#numeric”).ejNumericTextBox({
value: 100,
groupSeparator: “-“
});		 Not Applicable

Numeric configuration

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

$(“#numeric”).ejNumericTextBox({
value: 120,
change: function(){}
});		 Event: change

var numeric = new ej.inputs.NumericTextBox({
value: 120,
change: function(){}
});
numeric.appendTo(“#numeric”);
Sets digits allowed after decimal point property: decimalPlaces

$(“#numeric”).ejNumericTextBox({
value: 100,
decimalPlaces: 2
});		 Property: decimals

var numeric = new ej.inputs.NumericTextBox({
value: 100,
format: “n2”,
decimals: 2
});
numeric.appendTo(“#numeric”);
Decrement value Not Applicable Method: decrement

var numeric = new ej.inputs.NumericTextBox({
value: 100
});
numeric.appendTo(“#numeric”);
numeric.decrement();
Disable the textbox Method: disable

$(“#numeric”).ejNumericTextBox({
value: 200
});
var numericObj = $(“#numeric”).data(“ejNumericTextBox”);
numericObj.disable();		 Can be achieved using,
API: enabled
var numeric = new ej.inputs.NumericTextBox({
value: 100,
});
numeric.appendTo(“#numeric”);
var numObj = document.getElementById(“numeric”).ej2_instances[0]
numObj.enabled = false;
Enable the textbox Method: enable

$(“#numeric”).ejNumericTextBox({
value: 200
});
var numericObj = $(“#numeric”).data(“ejNumericTextBox”);
numericObj.enable();		 Can be achieved using,
API: enabled
var numeric = new ej.inputs.NumericTextBox({
value: 100,
});
numeric.appendTo(“#numeric”);
var numObj = document.getElementById(“numeric”).ej2_instances[0]
numObj.enabled = true;
Gets value of editor Method: getValue

$(“#numeric”).ejNumericTextBox({
value: 100
});
var numericObj = $(“#numeric”).data(“ejNumericTextBox”);
numericObj.getValue();		 Method: getText

var numeric = new ej.inputs.NumericTextBox({
value: 100
});
numeric.appendTo(“#numeric”);
numeric.getText();
Increment value Not Applicable Method: increment

var numeric = new ej.inputs.NumericTextBox({
value: 80
});
numeric.appendTo(“#numeric”);
numeric.increment();
Step value property: incrementStep

$(“#numeric”).ejNumericTextBox({
value: 100,
incrementStep: 2
});		 Property: step

var numeric = new ej.inputs.NumericTextBox({
value: 100,
step: 2
});
numeric.appendTo(“#numeric”);
Sets Maximum value property: maxValue

$(“#numeric”).ejNumericTextBox({
value: 100,
maxValue: 200
});		 Property: max

var numeric = new ej.inputs.NumericTextBox({
value: 100,
max: 200
});
numeric.appendTo(“#numeric”);
Sets Minimum value property: minValue

$(“#numeric”).ejNumericTextBox({
value: 100,
minValue: 20
});		 Property: min

var numeric = new ej.inputs.NumericTextBox({
value: 100,
min: 20
});
numeric.appendTo(“#numeric”);
Negative pattern for formatting values property: negativePattern

$(“#numeric”).ejNumericTextBox({
value: -20,
negativePattern: “( n)”
});		 Not Applicable
Positive pattern for formatting values property: positivePattern

$(“#numeric”).ejNumericTextBox({
value: 20,
positivePattern: “n kg”
});		 Not Applicable
Specifies value property: value

$(“#numeric”).ejNumericTextBox({
value: 100
});		 Property: value

var numeric = new ej.inputs.NumericTextBox({
value: 100
});
numeric.appendTo(“#numeric”);
Displays hint on editor property: watermarkText

$(“#numeric”).ejNumericTextBox({
value: 80
watermarkText: “Enter value:”
});		 Property: placeholder

var numeric = new ej.inputs.NumericTextBox({
value: 100
placeholder: “Enter value:”
});
numeric.appendTo(“#numeric”);
Placeholder float type Not Applicable Property: floatLabelType

var numeric = new ej.inputs.NumericTextBox({
value: 200
placeholder: “Enter value:”
floatLabelType: “Auto”
});
numeric.appendTo(“#numeric”);

Number Formats

Behavior API in Essential JS 1 API in Essential JS 2
Set Currency symbol property: currencySymbol

$(“#currency”).ejCurrencyTextBox({
value: 100,
currencySymbol: “EUR”
});		 Property: currency

var currency = new ej.inputs.NumericTextBox({
value: 100,
format: “c2”,
currency: “EUR”
});
currency.appendTo(“#currency”);
Number Format Not Applicable Property: format

var numeric = new ej.inputs.NumericTextBox({
value: 200
format: “n2”
});
numeric.appendTo(“#numeric”);

Validation

Behavior API in Essential JS 1 API in Essential JS 2
Strict Mode property: enableStrictMode

$(“#numeric”).ejNumericTextBox({
value: 80,
enableStrictMode: true
});		 Property: strictMode

var numeric = new ej.inputs.NumericTextBox({
value: 80,
strictMode: true
});
numeric.appendTo(“#numeric”);
Validation on typing property: validateOnType

$(“#numeric”).ejNumericTextBox({
value: 100,
validateOnType: true
});		 Property: validateDecimalOnType

var numeric = new ej.inputs.NumericTextBox({
value: 100,
validateDecimalOnType: true
});
numeric.appendTo(“#numeric”);
Validation Message property: validationMessage

$(“#numeric”).ejNumericTextBox({
value: 100,
validationRules: {required: true}
validationMessage: {required: “Required value”}
});		 Validation in NumericTextBox can be achieved through form validation

var options = {
rules: {
‘numericRange’: {required: [true, “Number is required”]},
}
var formObject = new ej.inputs.FormValidator(‘#form-element’, options);
var customPlace= function(element, error) {
element.parentNode.parentNode.appendChild(error);
};
formObject.customPlacement = customPlace;
var numeric = new ej.inputs.NumericTextBox({
value: 15,
});
numeric.appendTo(‘#numeric1’);

HTML
<form id=”form-element” class=”form-horizontal”>
<input id=”numeric1” type=”text” name=”numericRange” class=”form-control” />
<div id=”error”></div>
</form>
Validation Rules property: validationRules

$(“#numeric”).ejNumericTextBox({
value: 100,
validationRules: {required: true}
});		 Validation in NumericTextBox can be achieved through form validation

var options = {
rules: {
‘numericRange’: {required: [true]},
}
var formObject = new ej.inputs.FormValidator(‘#form-element’, options);
var customPlace= function(element, error) {
element.parentNode.parentNode.appendChild(error);
};
formObject.customPlacement = customPlace;
var numeric = new ej.inputs.NumericTextBox({
value: 15,
});
numeric.appendTo(‘#numeric1’);

HTML
<form id=”form-element” class=”form-horizontal”>
<input id=”numeric1” type=”text” name=”numericRange” class=”form-control” />
<div id=”error”></div>
</form>