Search results

How To

Customize spin up and down icons

This section explains about how to change/customize spin up and down icons. You can customize spin button icons using e-spin-up and e-spin-down classes of those buttons.

You can override the default icons of e-spin-up and e-spin-down classes using the following CSS code snippets.

  .e-numeric .e-input-group-icon.e-spin-up:before {
    content: "\e823";
    color: rgba(0, 0, 0, 0.54);
  }
  .e-numeric .e-input-group-icon.e-spin-down:before {
    content: "\e814";
    color: rgba(0, 0, 0, 0.54);
  }
Source
Preview
index.js
index.html
styles.css
// initializes NumericTextBox component
var numeric = new ej.inputs.NumericTextBox({
    // sets value to the NumericTextBox
    value: 10
});

// renders initialized NumericTextBox
numeric.appendTo('#numeric');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 NumericTextBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript NumericTextBox Component with Custom Icons">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div class="wrap">
          <input id="numeric" type="text">
        </div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  margin: 0 auto;
  width: 240px;
  padding-top:100px;
}

/* csslint ignore:start */
.e-numeric .e-input-group-icon.e-spin-up:before {
    content: "\e823";
    color: rgba(0, 0, 0, 0.54);
  }

.e-numeric .e-input-group-icon.e-spin-down:before {
    content: "\e814";
    color: rgba(0, 0, 0, 0.54);
  }
/* csslint ignore:end */

Customize step value and hide spin buttons

The spin buttons allow you to increase or decrease the value with the predefined step value. The visibility of spin buttons can be set using theshowSpinButton property.

Source
Preview
index.js
index.html
styles.css
var hideButtons = new ej.inputs.NumericTextBox({
        // sets the step value as '2' to increase/decrease the value by '2'
        step: 2,
        // sets the showSpinButton value as `false` to hide the spin buttons
        showSpinButton: false,
        min: 10,
        max: 100,
        value: 16
    });

hideButtons.appendTo('#numeric');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 NumericTextBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript NumericTextBox Component">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div class="wrap">
          <input id="numeric" type="text">
        </div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  margin: 0 auto;
  width: 240px;
  padding-top:100px;
}

Change the appearance of NumericTextBox

You can change the appearance of the NumericTextBox by adding custom cssClass to the component and enabling styles. Refer to the following example to change the appearance of the NumericTextBox.

Source
Preview
index.js
index.html
styles.css
// initializes the NumericTextBox component
var numeric = new ej.inputs.NumericTextBox({
    // sets value to the NumericTextBox
     value: 10,
     placeholder: 'Enter value :',
     floatLabelType: 'Always',
});

numeric.appendTo('#numeric1');

//adding custom css class to NumericTextBox
var x=document.getElementById("numeric1").ej2_instances[0];
x.cssClass="e-style";
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 NumericTextBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript NumericTextBox Component with Custom cssClass">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div class="wrap">
          <input id="numeric1" type="text" name="numericValue/">
        </div>
    </div>
    
<style>
  .e-numeric.e-style .e-control.e-numerictextbox  {
    color: royalblue ;
    font-size: xx-large ;
    border: 0px ;
  }
  .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left), .e-float-input.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left) {
    border-color: royalblue;
  }
  .e-control-wrapper.e-numeric.e-float-input.e-style .e-spin-down  {
    color:royalblue;
  }
  .e-control-wrapper.e-numeric.e-float-input.e-style .e-float-line::before {
    background: royalblue ;
  }
  .e-control-wrapper.e-numeric.e-float-input.e-style .e-float-line::after {
    background: royalblue ;
   }
  .e-control-wrapper.e-numeric.e-float-input.e-style .e-spin-up {
    color:royalblue ;
  }
  .e-control-wrapper.e-numeric.e-float-input.e-style .e-float-text.e-label-top {
    color: royalblue ;
    font-size: medium ;
  }
</style>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  margin: 0 auto;
  width: 240px;
  padding-top:100px;
}

Perform custom validation on NumericTextBox using FormValidator

This section explains how to perform custom validation on the NumericTextBox using FormValidator. The NumericTextBox will be validated when the value changes or the user clicks the submit button. Validation can be performed by adding custom validation in the rules collection of the FormValidator.

Source
Preview
index.js
index.html
styles.css
// initializes the NumericTextBox component
var numeric = new ej.inputs.NumericTextBox({
    // sets value to the NumericTextBox
    value: 15,
    min: 10,
    max: 100,
    strictMode : false,
    placeholder: 'NumericTextbox',
    floatLabelType: 'Always',
     change: function(args){
        if (numeric.value != null)
            formObject.validate("numericRange");
        }
});
numeric.appendTo('#numeric1');

//initialize button
var button = new ej.buttons.Button();
button.appendTo('#submit_btn')


// checks the value of NumericTextbox and returns the corresponding boolean value
var customFn = function(args) {
    if (numeric.value>=10 && numeric.value<=100) {
    return true;
    }
    else {
        return false;
    }
};
// sets required property in the FormValidator rules collection
var options = {
    rules: {
      'numericRange': {required: [true, "Number is required"]},
    }
}
// defines FormValidator to validate the NumericTextBox
var formObject =  new ej.inputs.FormValidator('#form-element', options);
//rules for validating the NumericTextbox
formObject.addRules('numericRange', { range: [customFn, "Please enter a number between 10 to 100"] });

// places error label outside the NumericTextBox using the customPlacement event of FormValidator
var customPlace= function(element, error) {
    element.parentNode.parentNode.appendChild(error);
};
formObject.customPlacement = customPlace;   
var submitBtn = document.getElementById('submit_btn');
submitBtn.onclick = function () {
    // validates the NumericTextBox
    formObject.validate("numericRange");
    var ele = document.getElementById('numeric1');
    // checks for incomplete value and alerts the formt submit
    if (ele.value !== "" && ele.value >=10 && ele.value<=100) {
        alert("Submitted");
    }
};
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 NumericTextBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript NumericTextBox Component with Form Validation">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div class="wrap">
            <form id="form-element" class="form-horizontal">
                <div class="form-group">
                    <input id="numeric1" type="text" name="numericRange" class="form-control">
                    <div id="error"></div>
                    <button type="button" id="submit_btn" style="margin-top: 10px">Submit</button>
                </div>
            </form>
        </div>
    </div>

<style>
    .e-numeric.e-control-wrapper {
        margin-bottom: 20px;
    }
     label.e-error {
        margin-top: -50px;
    }
</style>

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  margin: 0 auto;
  width: 240px;
  padding-top:100px;
}

Prevent nullable input in NumericTextBox

By default, the value of the NumericTextBox sets to null. In some applications, the value of the NumericTextBox should not be null at any instance. In such cases, following sample can be used to prevent nullable input in NumericTextBox.

Source
Preview
index.js
index.html
styles.css
// initializes the NumericTextBox component
var numeric = new ej.inputs.NumericTextBox({
    // sets value to the NumericTextBox
    min: 10,
    max: 100,
    placeholder: 'NumericTextbox',
    floatLabelType: 'Always',
    created: function(args) {
        //  prevents nullable value during initialization
        if (this.value==null) {
          this.value=0;
        }
    },
    change: function(args) {
         // prevents nullable input while focus out
         document.getElementById("numeric1").addEventListener('blur',function(e) { 
            if (args.value==null) 
            this.value=0;
    });
    }
});
// renders initialized NumericTextBox
numeric.appendTo('#numeric1');
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 NumericTextBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript NumericTextBox Component to prevent nullable input">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div class="wrap">
          <input id="numeric1" type="text">
        </div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  margin: 0 auto;
  width: 240px;
  padding-top:100px;
}

Maintain trailing zeros in NumericTextBox

By default, trailing zeros disappear when the NumericTextBox gets focus. However, you can use the following sample to maintain the trailing zeros while focusing the NumericTextBox.

Source
Preview
index.js
index.html
styles.css
var numericFocus= function () { 
      var numericObj = this.ej2_instances ? this.ej2_instances[0] : this;
      numericObj.element.value = numericObj.formattedValue(numericObj.decimals, +numericObj.element.value);
    }
    // Render the Numeric Textbox
  var numeric = new ej.inputs.NumericTextBox({
        value: 10,
        decimals:2,
        format: 'n2',
        change: numericFocus
    });
    numeric.appendTo('#numeric');
    document.getElementById('numeric').addEventListener('focus', numericFocus);
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 NumericTextBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript NumericTextBox Component to maintain trailing zeros">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
     
     <div id="container">
        <div class="wrap">
          <input id="numeric" type="text">
        </div>
     </div>

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  margin: 35px auto;
  width: 240px;
  padding-top:100px;
}