Ej1 api migration in EJ2 TypeScript Numerictextbox control

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

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

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

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

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

let numeric: NumericTextBox = new 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

let numeric: NumericTextBox = new NumericTextBox({
value: 100,
enabled: false
});
numeric.appendTo(“#numeric”);
numeric.destroy();
Control state Property: enabled

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

let numeric: NumericTextBox = new NumericTextBox({
value: 100,
enabled: false
});
numeric.appendTo(“#numeric”);
Persistence Property: enablePersistence

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

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

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

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

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

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

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

let numeric: NumericTextBox = new NumericTextBox({
value: 100,
blur: function() {}
});
numeric.appendTo(“#numeric”);
Sets Height Property: height

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

let numeric: NumericTextBox = new 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” />
let numeric: NumericTextBox = new NumericTextBox({
value: 1234”,
});
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” />
let numeric: NumericTextBox = new NumericTextBox({
value: 100 ,
});
numeric.appendTo(“#numeric”);
Read only Property: readOnly

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

let numeric: NumericTextBox = new NumericTextBox({
value: 80,
readonly: true
});
numeric.appendTo(“#numeric”);
Rounded corners Property: showRoundedCorner

$(“#numeric”).ejNumericTextBox({
value: 80,
showRoundedCorner: true
});		 Can be achieved using
let numeric: NumericTextBox = new 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

let numeric: NumericTextBox = new NumericTextBox({
value: 20,
showSpinButton: false
});
numeric.appendTo(“#numeric”);
Width Property: width

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

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

let numeric: NumericTextBox = new 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

let numeric: NumericTextBox = new 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

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

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

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

let numeric: NumericTextBox = new 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
let numeric: NumericTextBox = new 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
let numeric: NumericTextBox = new 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

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

let numeric: NumericTextBox = new NumericTextBox({
value: 80
});
numeric.appendTo(“#numeric”);
numeric.increment();
Step value Property: incrementStep

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

let numeric: NumericTextBox = new NumericTextBox({
value: 100,
step: 2
});
numeric.appendTo(“#numeric”);
Sets Maximum value Property: maxValue

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

let numeric: NumericTextBox = new NumericTextBox({
value: 100,
max: 200
});
numeric.appendTo(“#numeric”);
Sets Minimum value Property: minValue

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

let numeric: NumericTextBox = new 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

let numeric: NumericTextBox = new NumericTextBox({
value: 100
});
numeric.appendTo(“#numeric”);
Displays hint on editor Property: watermarkText

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

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

let numeric: NumericTextBox = new 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

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

let numeric: NumericTextBox = new 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

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

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

let numeric: NumericTextBox = new 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
let options: FormValidatorModel = {
rules: {
‘numericValue’: { required: [true, “Number is required”]},
}
let formObject: FormValidator = new FormValidator(‘#form-element’, options);
formObject.customPlacement= (inputElement, error) => {
document.getElementById(‘error’).appendChild(error);
}
let numeric: NumericTextBox = new NumericTextBox({value: “1234”
});
numeric.appendTo(“#numeric”);
HTML
<form id=”form-element” class=”form-horizontal”>
<input id=”numeric” type=”text” name=”numericValue” 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
let options: FormValidatorModel = {
rules: {
‘numericValue’: { required: true},
}
let formObject: FormValidator = new FormValidator(‘#form-element’, options);
let numeric: NumericTextBox = new NumericTextBox({
value: “1234”
});
numeric.appendTo(“#numeric”);
HTML
<form id=”form-element”>
<input id=”numeric” type=”text” name=”numericValue” class=”form-control” />
</form>