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-numeric-text-box id="numeric" value="120" create="onCreate" /> Script function onCreate(){} |
Event: created<ejs-numerictextbox id="numeric" created="onCreate" value="120"></ejs-numerictextbox> Script function onCreate(){} |
Adding custom classes | Property: css-class<ej-numeric-text-box id="numeric" value="100" css-class="custom" /> |
Property: cssClass<ejs-numerictextbox id="numeric" cssClass="custom" value="100"></ejs-numerictextbox> |
Triggers when editor is destroyed | Event: destroy<ej-numeric-text-box id="numeric" value="120" destroy="onDestroy" /> Script function onDestroy(){} |
Event: destroyed<ejs-numerictextbox id="numeric" destroyed="onDestroy" value="120"></ejs-numerictextbox> Script function onDestroy(){} |
Destroys textbox | Method: destroy<ej-numeric-text-box id="numeric" value="100"/> Script var numericObj = $(“#numeric).data("ejNumericTextbox"); numericObj.destroy(); |
Method: destroy<ejs-numerictextbox id="numeric" created="onCreate" value="100"></ejs-numerictextbox> Script function onCreate(){ var numeric = this; } numeric.destroy(); |
Control state | Property: enabled<ej-numeric-text-box id="numeric" value="100" enabled=false /> |
Property: enabled<ejs-numerictextbox id="numeric" enabled=false value="100"></ejs-numerictextbox> |
Persistence | Property: enable-persistence<ej-numeric-text-box id="numeric" value="100" enable-persistence=true /> |
Property: enablePersistence<ejs-numerictextbox id="numeric" enablePersistence=true value="100"></ejs-numerictextbox> |
Right To Left | Property: enable-rtl<ej-numeric-text-box id="numeric" value="100" enable-rtl=true /> |
Property: enableRtl<ejs-numerictextbox id="numeric" enableRtl=true value="100"></ejs-numerictextbox> |
Triggers when editor is focused in | Event: focus-in<ej-numeric-text-box id="numeric" value="20" focus-in="focusIn" /> Script function focusIn(){} |
Event: focus<ejs-numerictextbox id="numeric" value="100" focus="onFocus" ></ejs-numerictextbox> Script function onFocus(){} |
Triggers when editor is focused out | Event: focusOut<ej-numeric-text-box id="numeric" value="100" focus-out="focusOut" /> Script function focusOut(){} |
Event: blur<ejs-numerictextbox id="numeric" value="100" blur="onBlur" ></ejs-numerictextbox> Script function onBlur(){} |
Sets Height | Property: height<ej-numeric-text-box id="numeric" value="100" height="40px" /> |
Can be achieved using, <ejs-numerictextbox id="numeric" cssClass="custom" value="100"></ejs-numerictextbox> Css .e-numerictextbox.custom{ height: 40px; } |
HTML Attributes | Property: html-attributes<ej-numeric-text-box id="numeric" value="100" html-attributes="htmlAttr"/> Script @{ Dictionary<string, object> htmlAttr = new Dictionary<string, object>(); htmlAttr.Add("disabled", "disabled"); } |
Can be achieved using<ejs-numerictextbox id="numeric" created="onCreate" value="100"></ejs-numerictextbox> Script function onCreate{ this.element.setAttribute{"name","textbox'} } |
Name of editor | Property: name<ej-numeric-text-box id="numeric" value="100" name="Textbox"/> |
Can be achieved using<ejs-numerictextbox id="numeric" name="numerictextbox" value="100"></ejs-numerictextbox> |
Read only | Property: read-only<ej-numeric-text-box id="numeric" value="80" read-only=true /> |
Property: readonly<ejs-numerictextbox id="numeric" readonly=true value="80"></ejs-numerictextbox> |
Rounded corners | Property: show-rounded-corner<ej-numeric-text-box id="numeric" value="100" show-rounded-corner=true /> |
Can be achieved using<ejs-numerictextbox id="numeric" cssClass="e-style" floatLabelType="Always" value="100"></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: show-spin-button<ej-numeric-text-box id="numeric" value="20" show-spin-button=false /> |
Property: showSpinButton<ejs-numerictextbox id="numeric" showSpinButton=false value="20"></ejs-numerictextbox> |
Width | Property: width<ej-numeric-text-box id="numeric" value="20" width="220px" /> |
Property: width<ejs-numerictextbox id="numeric" width="220px" value="20"></ejs-numerictextbox> |
Clear Button | Not Applicable | Property: showClearButton<ejs-numerictextbox id="numeric" showClearButton=true value="100"></ejs-numerictextbox> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Localization culture | Property: locale<ej-numeric-text-box id="numeric" value="80" locale="de-DE" /> |
Property: locale<ejs-numerictextbox id="numeric" locale="de-DE" value="80"></ejs-numerictextbox> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Group digits in editor | Property: group-size<ej-numeric-text-box id="numeric" value="100" group-size="2" /> |
Not Applicable |
Group Separator | Property: group-separator<ej-numeric-text-box id="numeric" value="100" group-separator="-" /> |
Not Applicable |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Triggers on value change | Event: change<ej-numeric-text-box id="numeric" value="120" change="onChange" /> Script function onChange(){} |
Event: change<ejs-numerictextbox id="numeric" change="onChange" value="120"></ejs-numerictextbox> Script function onChange(){} |
Sets digits allowed after decimal point | Property: decimal-places<ej-numeric-text-box id="numeric" value="100" decimal-places=2 /> |
Property: decimals<ejs-numerictextbox id="numeric" format="n2" decimals="2" value="100"></ejs-numerictextbox> |
Decrement value | Not Applicable | Method: decrement<ejs-numerictextbox id="numeric" created="onCreate" value="100"></ejs-numerictextbox> Script function onCreate(){ var numeric = this; } numeric.decrement(); |
Disable the textbox | Method: disable<ej-numeric-text-box id="numeric" value="200"/> Script var numericObj = $(“#numeric).data("ejNumericTextbox"); numericObj.disable(); |
Can be achieved using<ejs-numerictextbox id="numeric" created="onCreate" value="100"></ejs-numerictextbox> Script function onCreate(){ var numeric = this; } numeric.enabled = false; |
Enable the textbox | Method: enable<ej-numeric-text-box id="numeric" value="200"/> Script var numericObj = $(“#numeric).data("ejNumericTextbox"); numericObj.enable(); |
Can be achieved using<ejs-numerictextbox id="numeric" created="onCreate" value="100"></ejs-numerictextbox> Script function onCreate(){ var numeric = this; } numeric.enabled = true; |
Gets value of editor | Method: getValue<ej-numeric-text-box id="numeric" value="100"/> Script var numericObj = $(“#numeric).data("ejNumericTextbox"); numericObj.getValue(); |
Method: getText<ejs-numerictextbox id="numeric" created="onCreate" value="100"></ejs-numerictextbox> Script function onCreate(){ var numeric = this; } numeric.getText(); |
Increment value | Not Applicable | Method: increment<ejs-numerictextbox id="numeric" created="onCreate" value="80"></ejs-numerictextbox> Script function onCreate(){ var numeric = this; } numeric.increment(); |
Step value | Property: increment-step<ej-numeric-text-box id="numeric" value="100" increment-step=2 /> |
Property: step<ejs-numerictextbox id="numeric" decimals="2" value="100" step="2"></ejs-numerictextbox> |
Sets Maximum value | Property: max-value<ej-numeric-text-box id="numeric" value="100" max-value="200" /> |
Property: max<ejs-numerictextbox id="numeric" max="200" value="100"></ejs-numerictextbox> |
Sets Minimum value | Property: min-value<ej-numeric-text-box id="numeric" value="100" min-value="200" /> |
Property: min<ejs-numerictextbox id="numeric" min="20" value="100"></ejs-numerictextbox> |
Negative pattern for formatting values | Property: negative-pattern<ej-numeric-text-box id="numeric" value="-20" negative-pattern="( n)" /> |
Not Applicable |
Positive pattern for formatting values | Property: positive-pattern<ej-numeric-text-box id="numeric" value="20" positive-pattern="n kg" /> |
Not Applicable |
Specifies value | Property: value<ej-numeric-text-box id="numeric" value="100" /> |
Property: value<ejs-numerictextbox id="numeric" value="100"></ejs-numerictextbox> |
Displays hint on editor | Property: watermark-text<ej-numeric-text-box id="numeric" value="80" watermark-text="Enter value" /> |
Property: placeholder<ejs-numerictextbox id="numeric" placeholder="Enter value" value="100"></ejs-numerictextbox> |
Placeholder float type | Not Applicable | Property: floatLabelType<ejs-numerictextbox id="numeric" placeholder="Enter value" value="200" floatLabelType="Auto"> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Set Currency symbol | Property: currency-symbol<ej-currency-text-box id="currency" value="100" currency-symbol="EUR" /> |
Property: currency<ejs-numerictextbox id="currency" format="c2" value="100" currency="EUR"> |
Number Format | Not Applicable | Property: format<ejs-numerictextbox id="numeric" format="n2" value="200"> |
Behavior | API in Essential JS 1 | API in Essential JS 2 |
---|---|---|
Strict Mode | Property: enable-strict-mode<ej-numeric-text-box id="numeric" value="80" enable-strict-mode=true /> |
Property: strictMode<ejs-numerictextbox id="numeric" strictMode=true value="80"> |
Validation on typing | Property: validate-on-type<ej-numeric-text-box id="numeric" value="100" validate-on-type=true /> |
Property: validateDecimalOnType<ejs-numerictextbox id="numeric" validateDecimalOnType=true value="100"> |
Validation Message | Property: validation-message<ej-numeric-text-box id="numeric" value="100" validation-rules="rule" validation-message="messages"/> Script @{ Dictionary<string, object> rule = new Dictionary<string, object>(); rule.Add("required",true); Dictionary<string, object> messages = new Dictionary<string, object>(); messages.Add("required", "Required value"); } |
Validation in NumericTextBox can be achieved using<form id="form-element"> <div> <ejs-numerictextbox id="numeric" min="10" max="100" change="onChange" created="onCreate" strictMode="false" width="250px"></ejs-numerictextbox> </div> </form> Script function onCreate() { document.getElementById(this.element.id).setAttribute("name", "numericRange"); } function onChange() { if (numeric.value != null) { formObject.validate("numericRange"); } } var options = { rules: { 'numericRange': { required: [true, "Enter valid number"] }, }, }; var formObject = new ej.inputs.FormValidator('#form-element', options); formObject.customPlacement = function (element, errorElement) { element.parentNode.parentNode.appendChild(errorElement); }; |
Validation Rules | Property: validation-rules<ej-numeric-text-box id="numeric" value="100" validation-rules="rule" /> Script @{ Dictionary<string, object> rule = new Dictionary<string, object>(); rule.Add("required",true); } |
Validation in NumericTextBox can be achieved using<form id="form-element"> <div> <ejs-numerictextbox id="numeric" min="10" max="100" change="onChange" created="onCreate" strictMode="false" width="250px"></ejs-numerictextbox> </div> </form> Script function onCreate() { document.getElementById(this.element.id).setAttribute("name", "numericRange"); } function onChange() { if (numeric.value != null) { formObject.validate("numericRange"); } } var options = { rules: { 'numericRange': { required: [true] }, }, }; var formObject = new ej.inputs.FormValidator('#form-element', options); formObject.customPlacement = function (element, errorElement) { element.parentNode.parentNode.appendChild(errorElement); }; |