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<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> |
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> |
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 |
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> |
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> |
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); |