This article describes the API migration process of NumericTextBox component from Essential JS 1 to Essential JS 2.
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Triggers on creation | Event create<input id="numeric" type="text" ej-numerictextbox value="120" (create)="onCreate()"/> script onCreate() {} |
Event: created<ejs-numerictextbox value="120" (created)="onCreate()"></ejs-numerictextbox> script public onCreate(): void {} |
Adding custom classes | Property cssClass<input id="numeric" type="text" ej-numerictextbox value="120" cssClass="custom"/> |
Property: cssClass<ejs-numerictextbox value="120" cssClass="custom"></ejs-numerictextbox> |
Triggers when editor is destroyed | Event destroy<input id="numeric" type="text" ej-numerictextbox value="120" (destroy)="onDestroy()"/> script onDestroy() {} |
Event: destroyed<ejs-numerictextbox value="120" (destroyed)="onDestroy()"></ejs-numerictextbox> script public onDestroy(): void {} |
Destroys textbox | Method destroy<input id="numeric" type="text" ej-numerictextbox value="100"/> var numericObj = $("#numeric").data("ejNumericTextbox"); numericObj.destroy(); |
Method: destroy<ejs-numerictextbox value="100" #numeric></ejs-numerictextbox> @ViewChild("numeric") numeric: NumericTextBoxComponent; numeric.destroy(); |
Control state | Property enabled<input id="numeric" type="text" ej-numerictextbox value="100" enabled=false/> |
Property: enabled<ejs-numerictextbox value="100" enabled=false></ejs-numerictextbox> |
Persistence | Property enablePersistence<input id="numeric" type="text" ej-numerictextbox value="100" enablePersistence=true/> |
Property: enablePersistence<ejs-numerictextbox value="100" enablePersistence=true></ejs-numerictextbox> |
Right To Left | Property enableRTL<input id="numeric" type="text" ej-numerictextbox value="100" enableRTL=true/> |
Property: enableRtl<ejs-numerictextbox value="100" enableRtl=true></ejs-numerictextbox> |
Triggers when editor is focused in | Event focusIn<input id="numeric" type="text" ej-numerictextbox value="20" (focusIn)="onFocusIn()"/> script onFocusIn() {} |
Event: focus<ejs-numerictextbox value='12345'(focus) = "onFocus()"></ejs-numerictextbox> script public onFocus(): void {} |
Triggers when editor is focused out | Event focusOut<input id="numeric" type="text" ej-numerictextbox value="100" (focusOut)="onFocusOut()"/> script onFocusOut() {} |
Event: blur<ejs-numerictextbox value='12345'(blur) = "onBlur()"></ejs-numerictextbox> script public onBlur(): void {} |
Sets Height | Property height<input id="numeric" type="text" ej-numerictextbox value="100" height="40px"/> |
Can be achieved using, <ejs-numerictextbox value="100" cssClass="custom"></ejs-numerictextbox> Css .e-numerictextbox.custom{ height: 40px; } |
HTML Attributes | Property htmlAttributes<input id="numeric" type="text" ej-numerictextbox value="100" [htmlAttributes]= "htmlAttr" /> script constructor() { this.htmlAttr = {name: "numerictextbox"}; } |
Can be achieved using script <ejs-numerictextbox #numeric value="1234" name="numerictextbox"></ejs-numerictextbox> |
Name of editor | Property name<input id="numeric" type="text" ej-numerictextbox value="100" name="textbox"/> |
Can be achieved using script <ejs-numerictextbox #numeric value="1234" name="numerictextbox"></ejs-numerictextbox> |
Read only | Property readOnly<input id="numeric" type="text" ej-numerictextbox value="80" readOnly=true/> |
Property: readonly<ejs-numerictextbox value="80" readonly=true></ejs-numerictextbox> |
Rounded corners | Property showRoundedCorner<input id="numeric" type="text" ej-numerictextbox value="80" showRoundedCorner=true/> |
Can be achieved using script <ejs-numerictextbox #numeric value="1234" floatLabelType="Always" cssClass="e-style"></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 showSpinButton<input id="numeric" type="text" ej-numerictextbox value="20" showSpinButton=false/> |
Property: showSpinButton<ejs-numerictextbox value="20" showSpinButton=false></ejs-numerictextbox> |
Width | Property width<input id="numeric" type="text" ej-numerictextbox value="20" width="220px"/> |
Property: width<ejs-numerictextbox value="20" width="220px"></ejs-numerictextbox> |
Clear Button | Not Applicable | Property: showClearButton<ejs-numerictextbox value="100" showClearButton=true></ejs-numerictextbox> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Localization culture | Property locale<input id="numeric" type="text" ej-numerictextbox value="80" locale="de-DE"/> |
Property: locale<ejs-numerictextbox value="80" locale="de-DE"></ejs-numerictextbox> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Group digits in editor | Property groupSize<input id="numeric" type="text" ej-numerictextbox value="100" groupSize="2"/> |
Not Applicable |
Group Separator | Property groupSeparator<input id="numeric" type="text" ej-numerictextbox value="100" groupSeparator="-"/> |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Triggers on value change | Event change<input id="numeric" type="text" ej-numerictextbox value="120" (change)="onChange()"/> script onChange() {} |
Event: change<ejs-numerictextbox value="120" (change)="onChange()"></ejs-numerictextbox> script public onChange(): void {} |
Sets digits allowed after decimal point | Property decimalPlaces<input id="numeric" type="text" ej-numerictextbox value="100" decimalPlaces="2"/> |
Property: decimals<ejs-numerictextbox value="80" format="n2" decimals="2"></ejs-numerictextbox> |
Decrement value | Not Applicable | Method: decrement<ejs-numerictextbox #numeric value="100"></ejs-numerictextbox> @ViewChild("numeric") numeric: NumericTextBoxComponent; numeric.decrement(); |
Disable the textbox | Method disable<input id="numeric" type="text" ej-numerictextbox value="200"/> var numericObj = $("#numeric").data("ejNumericTextbox"); numericObj.disable(); |
Can be achieved using script <ejs-numerictextbox #numeric value="1234"></ejs-numerictextbox> @ViewChild("numeric") numeric: NumericTextBoxComponent; numeric.enabled = false; |
Enable the textbox | Method enable<input id="numeric" type="text" ej-numerictextbox value="200"/> var numericObj = $("#numeric").data("ejNumericTextbox"); numericObj.enable(); |
Can be achieved using script <ejs-numerictextbox #numeric value="1234"></ejs-numerictextbox> @ViewChild("numeric") numeric: NumericTextBoxComponent; numeric.enabled = true; |
Gets value of editor | Method getValue<input id="numeric" type="text" ej-numerictextbox value="100"/> var numericObj = $("#numeric").data("ejNumericTextbox"); numericObj.getValue(); |
Method: getText<ejs-numerictextbox value="100" #numeric></ejs-numerictextbox> @ViewChild("numeric") numeric: NumericTextBoxComponent; numeric.getText(); |
Increment value | Not Applicable | Method: increment<ejs-numerictextbox #numeric value="80"></ejs-numerictextbox> @ViewChild("numeric") numeric: NumericTextBoxComponent; numeric.increment(); |
Step value | Property incrementStep<input id="numeric" type="text" ej-numerictextbox value="100" incrementStep="2"/> |
Property: step<ejs-numerictextbox value="100" step="2"></ejs-numerictextbox> |
Sets Maximum value | Property maxValue<input id="numeric" type="text" ej-numerictextbox value="100" maxValue="200"/> |
Property: max<ejs-numerictextbox value="100" max="200"></ejs-numerictextbox> |
Sets Minimum value | Property minValue<input id="numeric" type="text" ej-numerictextbox value="100" minValue="20"/> |
Property: min<ejs-numerictextbox value="100" min="20"></ejs-numerictextbox> |
Negative pattern for formatting values | Property negativePattern<input id="numeric" type="text" ej-numerictextbox value="-20" negativePattern: "( n)"/> |
Not Applicable |
Positive pattern for formatting values | Property positivePattern<input id="numeric" type="text" ej-numerictextbox value="20" positivePattern: "n kg"/> |
Not Applicable |
Specifies value | Property value<input id="numeric" type="text" ej-numerictextbox value="100" /> |
Property: value<ejs-numerictextbox value="100"></ejs-numerictextbox> |
Displays hint on editor | Property watermarkText<input id="numeric" type="text" ej-numerictextbox value="80" watermarkText="Enter value" /> |
Property: placeholder<ejs-numerictextbox value="100" placeholder="Enter value"></ejs-numerictextbox> |
Placeholder float type | Not Applicable | Property: floatLabelType<ejs-numerictextbox value="200" placeholder="Enter value" floatLabelType="Auto"></ejs-numerictextbox> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Set Currency symbol | Property currencySymbol<input id="currency" type="text" ej-currencytextbox value="100" currencySymbol="EUR"> |
Property: currency<ejs-numerictextbox value="100" format="c2" currency="EUR"></ejs-numerictextbox> |
Number Format | Not Applicable | Property: format<ejs-numerictextbox value="200" format="n2"></ejs-numerictextbox> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Strict Mode | Property enableStrictMode<input id="numeric" type="text" ej-numerictextbox value="80" enableStrictMode=true /> |
Property: strictMode<ejs-numerictextbox value="80" strictMode=true></ejs-numerictextbox> |
Validation on typing | Property validateOnType<input id="numeric" type="text" ej-numerictextbox value="80" validateOnType=true /> |
Property: validateDecimalOnType<ejs-numerictextbox value="100" validateDecimalOnType=true></ejs-numerictextbox> |
Validation Message | Property validationMessage<input id="numeric" type="text" ej-numerictextbox value="100" /> script constructor() { this.validationRules = {required: true}; this.validationMessage = {required: "Required value"} } |
Can be achieved using Form Validator<form #formElement class="form-horizontal"> <ejs-numerictextbox #numeric="" id="numeric" (created)="onCreate($event)" (change)= "onChange($event)"></ejs-numerictextbox> </form> let options: FormValidatorModel = { rules: { 'numericRange': { required: [true, "Number is required"] }, }, customPlacement: (inputElement: HTMLElement, errorElement: HTMLElement) => { inputElement.parentNode.parentNode.parentNode.appendChild(errorElement); } }; this.formObject = new FormValidator(this.element.nativeElement, options); public onCreate(){ document.getElementById("numeric").setAttribute("name", "numericRange"); } |
Validation Rules | Property validationRules<input id="numeric" type="text" ej-numerictextbox value="100" /> constructor() { script this.validationRules = {required: true}; } |
Can be achieved using Form Validator<form #formElement class="form-horizontal"> <ejs-numerictextbox #numeric="" id="numeric" (created)="onCreate($event)" (change)= "onChange($event)"></ejs-numerictextbox> </form> let options: FormValidatorModel = { rules: { 'numericRange': { required: [true] }, }, customPlacement: (inputElement: HTMLElement, errorElement: HTMLElement) => { inputElement.parentNode.parentNode.parentNode.appendChild(errorElement); } }; this.formObject = new FormValidator(this.element.nativeElement, options); public onCreate(){ document.getElementById("numeric").setAttribute("name", "numericRange"); } |