Ej1 api migration in React Numerictextbox component

30 Jan 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

<EJ.NumericTextbox id="numeric" value={120} create={this.onCreate}></EJ.NumericTextbox >

script
onCreate: function() {} 		Event: created

<NumericTextBoxComponent id="numeric" value='120' created={this.onCreated.bind(this)}></NumericTextBoxComponent>

public onCreated() {}
Adding custom classes Property cssClass

<EJ.NumericTextbox id="numeric" value={120} cssClass="custom"></EJ.NumericTextbox > 		Property: cssClass

<NumericTextBoxComponent id="numeric" value='120' cssClass="custom"></NumericTextBoxComponent>
Triggers when editor is destroyed Event destroy

<EJ.NumericTextbox id="numeric" value={120} destroy={this.onDestroy}></EJ.NumericTextbox >

script
onDestroy: function() {} 		Event: destroyed

<NumericTextBoxComponent id="numeric" value='120' destroyed={this.onDestroyed.bind(this)}></NumericTextBoxComponent>

public onDestroyed() {}
Destroys textbox Method destroy

<EJ.NumericTextbox id="numeric" value={100}></EJ.NumericTextbox >
var numericObj = $("#numeric").data("ejNumericTextbox");
numericObj.destroy(); 		Method: destroy

<NumericTextBoxComponent id="numeric" value='100'></NumericTextBoxComponent>
var numeric = document.getElementById('numeric').ej2_instances[0];
numeric.destroy();
Control state Property enabled

<EJ.NumericTextbox id="numeric" value={100} enabled={false}></EJ.NumericTextbox > 		Property: enabled

<NumericTextBoxComponent id="numeric" value='100' enabled=false></NumericTextBoxComponent>
Persistence Property enablePersistence

<EJ.NumericTextbox id="numeric" value={100} enablePersistence={true}></EJ.NumericTextbox > 		Property: enablePersistence

<NumericTextBoxComponent id="numeric" value='100' enablePersistence=true></NumericTextBoxComponent>
Right To Left Property enableRTL

<EJ.NumericTextbox id="numeric" value={100} enableRTL={true}></EJ.NumericTextbox > 		Property: enableRtl

<NumericTextBoxComponent id="numeric" value='100' enableRtl=true></NumericTextBoxComponent>
Triggers when editor is focused in Event focusIn

<EJ.NumericTextbox id="numeric" value={20} focusIn={this.focusIn}></EJ.NumericTextbox >

script
focusIn: function() {} 		Event: focus

<NumericTextBoxComponent id="numeric" value={100} focus={this.onFocus.bind(this)}></NumericTextBoxComponent>

script
public onFocus() {}
Triggers when editor is focused out Event focusOut

<EJ.NumericTextbox id="numeric" value={100} focusOut={this.focusOut}></EJ.NumericTextbox >

script
focusOut: function() {} 		Event: blur

<NumericTextBoxComponent id="numeric" value={100} blur={this.onBlur.bind(this)}></NumericTextBoxComponent>

script
public onBlur() {}
Sets Height Property height

<EJ.NumericTextbox id="numeric" value={100} height="100px"></EJ.NumericTextbox > 		Can be achieved using,

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

<EJ.NumericTextbox id="numeric" value={100} htmlAttributes= {htmlAttr}></EJ.NumericTextbox>

script
var htmlAttr = {name: "numerictextbox"}; 		Can be achieved using
<NumericTextBoxComponent value= '32' id="numeric" placeholder="Numeric TextBox" created={this.onCreated.bind(this)} floatLabelType="Always"></NumericTextBoxComponent>
public onCreated(){
document.getElementById("numeric").setAttribute("name","Numeric")
}
Name of editor Property name

<EJ.NumericTextbox id="numeric" value={100} htmlAttributes= name="textbox"></EJ.NumericTextbox> 		Can be achieved using
<NumericTextBoxComponent value= '32' id="numeric" placeholder="Numeric TextBox" created={this.onCreated.bind(this)} floatLabelType="Always"></NumericTextBoxComponent>
public onCreated(){
document.getElementById("numeric").setAttribute("name","Numeric")
}
Read only Property readOnly

<EJ.NumericTextbox id="numeric" value={80} readOnly={true}></EJ.NumericTextbox> 		Property: readonly

<NumericTextBoxComponent id="numeric" value='80' readonly=true></NumericTextBoxComponent>
Rounded corners Property showRoundedCorner

<EJ.NumericTextbox id="numeric" value={80} showRoundedCorner={true}></EJ.NumericTextbox> 		Can be achieved using
<NumericTextBoxComponent id="numeric" value='100' cssClass='e-style'></NumericTextBoxComponent>
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

<EJ.NumericTextbox id="numeric" value={20} showSpinButton={false}></EJ.NumericTextbox> 		Property: showSpinButton

<NumericTextBoxComponent id="numeric" value='20' showSpinButton=false></NumericTextBoxComponent>
Width Property width

<EJ.NumericTextbox id="numeric" value={20} width"220px"></EJ.NumericTextbox> 		Property: width

<NumericTextBoxComponent id="numeric" value='20' width="220px"></NumericTextBoxComponent>
Clear Button Not Applicable Property: showClearButton

<NumericTextBoxComponent id="numeric" value='100' showClearButton=true></NumericTextBoxComponent>

Globalization

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

<EJ.NumericTextbox id="numeric" value={80} locale="de-DE"></EJ.NumericTextbox> 		Property: locale

<NumericTextBoxComponent id="numeric" value='80' locale="de-DE"></NumericTextBoxComponent>

Group

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

<EJ.NumericTextbox id="numeric" value={100} groupSize={2}></EJ.NumericTextbox> 		Not Applicable
Group Separator Property groupSeparator

<EJ.NumericTextbox id="numeric" value={100} groupSeparator="-"></EJ.NumericTextbox> 		Not Applicable

Numeric configuration

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

<EJ.NumericTextbox id="numeric" value={120} change={this.onChange}></EJ.NumericTextbox >

script
onChange: function() {} 		Event: change

<NumericTextBoxComponent id="numeric" value='120' change={this.onChange.bind(this)}></NumericTextBoxComponent>

public onChange() {}
Sets digits allowed after decimal point Property decimalPlaces

<EJ.NumericTextbox id="numeric" value={100} decimalPlaces={2}></EJ.NumericTextbox> 		Property: decimals

<NumericTextBoxComponent id="numeric" value='100' format="n2" decimals="2"></NumericTextBoxComponent>
Decrement value Not Applicable Method: decrement

<NumericTextBoxComponent id="numeric" value={100} ></NumericTextBoxComponent>
var numeric = document.getElementById('numeric').ej2_instances[0];
numeric.decrement();
Disable the textbox Method disable

<EJ.NumericTextbox id="numeric" value={200} ></EJ.NumericTextbox>
var numericObj = $("#numeric").data("ejNumericTextbox");
numericObj.disable(); 		Can be achieved by
<NumericTextBoxComponent id="numeric" value='100' showClearButton=true></NumericTextBoxComponent>
var numeric = document.getElementById('numeric').ej2_instances[0];
numeric.enabled = false;
Enable the textbox Method enable

<EJ.NumericTextbox id="numeric" value={200} ></EJ.NumericTextbox>
var numericObj = $("#numeric").data("ejNumericTextbox");
numericObj.enable(); 		Can be achieved by
<NumericTextBoxComponent id="numeric" value='100' showClearButton=true></NumericTextBoxComponent>
var numeric = document.getElementById('numeric').ej2_instances[0];
numeric.enabled = true;
Gets value of editor Method getValue

<EJ.NumericTextbox id="numeric" value={100} ></EJ.NumericTextbox>
var numericObj = $("#numeric").data("ejNumericTextbox");
numericObj.getValue(); 		Method: getText

<NumericTextBoxComponent id="numeric" value='100'></NumericTextBoxComponent>
var numeric = document.getElementById('numeric').ej2_instances[0];
numeric.getText();
Increment value Not Applicable Method: increment

<NumericTextBoxComponent id="numeric" value='100'></NumericTextBoxComponent>
var numeric = document.getElementById('numeric').ej2_instances[0];
numeric.increment();
Step value Property incrementStep

<EJ.NumericTextbox id="numeric" value={100} incrementStep={2}></EJ.NumericTextbox> 		Property: step

<NumericTextBoxComponent id="numeric" value='100' step="2"></NumericTextBoxComponent>
Sets Maximum value Property maxValue

<EJ.NumericTextbox id="numeric" value={100} maxValue={200}></EJ.NumericTextbox> 		Property: max

<NumericTextBoxComponent id="numeric" value='100' max="200"></NumericTextBoxComponent>
Sets Minimum value Property minValue

<EJ.NumericTextbox id="numeric" value={100} minValue={20}></EJ.NumericTextbox> 		Property: min

<NumericTextBoxComponent id="numeric" value='100' min="20"></NumericTextBoxComponent>
Negative pattern for formatting values Property negativePattern

<EJ.NumericTextbox id="numeric" value={-20} negativePattern="( n)"></EJ.NumericTextbox> 		Not Applicable
Positive pattern for formatting values Property positivePattern

<EJ.NumericTextbox id="numeric" value={20} positivePattern="n kg"></EJ.NumericTextbox> 		Not Applicable
Specifies value Property value

<EJ.NumericTextbox id="numeric" value={100}></EJ.NumericTextbox> 		Property: value

<NumericTextBoxComponent id="numeric" value='100'></NumericTextBoxComponent>
Displays hint on editor Property watermarkText

<EJ.NumericTextbox id="numeric" value={80} watermarkText="Enter value"></EJ.NumericTextbox> 		Property: placeholder

<NumericTextBoxComponent id="numeric" value='100' placeholder="Enter value"></NumericTextBoxComponent>
Placeholder float type Not Applicable Property: floatLabelType

<NumericTextBoxComponent id="numeric" value='200' placeholder="Enter value" floatLabelType="Auto"></NumericTextBoxComponent>

Number Formats

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

<EJ.CurrencyTextbox id="currency" value={100} currencySymbol="EUR"></EJ.CurrencyTextbox> 		Property: currency

<NumericTextBoxComponent id="currency" value='100' format="c2" currency="EUR"></NumericTextBoxComponent>
Number Format Not Applicable Property: format

<NumericTextBoxComponent id="numeric" value='200' format="n2"></NumericTextBoxComponent>

Validation

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

<EJ.NumericTextbox id="numeric" value={80} enableStrictMode={true}></EJ.NumericTextbox> 		Property: strictMode

<NumericTextBoxComponent id="numeric" value='80' strictMode=true></NumericTextBoxComponent>
Validation on typing Property validateOnType

<EJ.NumericTextbox id="numeric" value={80} validateOnType={true}></EJ.NumericTextbox> 		Property: validateDecimalOnType

<NumericTextBoxComponent id="numeric" value='100' validateDecimalOnType=true></NumericTextBoxComponent>
Validation message Property: validationMessage

<EJ.NumericTextboxid="numeric" value={100} validationRules= {validationRules} validationMessage= {validationMessage}></EJ.NumericTextbox>

var validationRules = {required: {true}};
var validationMessage = {required: "Required value"}; 		Can be achieved by
<NumericTextBoxComponent id="numeric" change={this.onChange.bind(this)} created={this.onCreate.bind(this)} floatLabelType='Always' />
let options: FormValidatorModel = {
rules: {
'numeric': { required: [true, "Number is required"] },
},
customPlacement: (inputElement: HTMLElement, errorElement: HTMLElement) => {
inputElement.parentNode.parentNode.parentNode.appendChild(errorElement);
}
};
this.formObject = new FormValidator('#form-element', options);
Validation Rules Property: validationRules

<EJ.NumericTextbox id="numeric" value={100} validationRules= {validationRules}></EJ.NumericTextbox>

var validationRules = {required: {true}}; 		Can be achieved by
<NumericTextBoxComponent id="numeric" change={this.onChange.bind(this)} created={this.onCreate.bind(this)} floatLabelType='Always' />
let options: FormValidatorModel = {
rules: {
'numeric': { required: [true] },
},
customPlacement: (inputElement: HTMLElement, errorElement: HTMLElement) => {
inputElement.parentNode.parentNode.parentNode.appendChild(errorElement);
}
};
this.formObject = new FormValidator('#form-element', options);