ASP.NET Core
Demos
Support
Forum
Download
Search results

Migration from Essential JS 1 in ASP.NET Core NumericTextBox control

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

Globalization

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>

Group

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

Numeric configuration

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">

Number Formats

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">

Validation

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);
};
Previous
Next