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
app.vue
<template>
  <div id="app">
        <div class='wrap'>
           <ejs-numerictextbox id="numeric" :value="value"></ejs-numerictextbox>
        </div>
  </div>
</template>
<script>
import Vue from "vue";
import { NumericTextBoxPlugin } from "@syncfusion/ej2-vue-inputs";

Vue.use(NumericTextBoxPlugin);
export default {
  data () {
    return {
        // sets number of decimal places to be allowed by the NumericTextBox
        value: 10,
    }
  }
}
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
 .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);
}
</style>

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
app.vue
<template>
  <div id="app">
        <div class='wrap'>
           <ejs-numerictextbox id="numeric" showSpinButton='false' :value="value" :step="step" :min="min" :max="max"></ejs-numerictextbox>
        </div>
  </div>
</template>
<script>
import Vue from "vue";
import { NumericTextBoxPlugin } from "@syncfusion/ej2-vue-inputs";

Vue.use(NumericTextBoxPlugin);
export default {
  data () {
    return {
        step: 2,
        // sets the showSpinButton value as `false` to hide the spin buttons
        showSpinButton: false
        min: 10,
        max: 100,
        value: 16
    }
  }
}
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
 .wrap {
  margin: 0 auto;
  width: 240px;
  padding-top: 100px;
}
</style>

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
app.vue
<template>
  <div id="app">
        <div class='wrap'>
           <ejs-numerictextbox id="numeric" :value="value" placeholder='Enter value' floatLabelType='Always' cssClass='e-style'></ejs-numerictextbox>
        </div>
  </div>
</template>
<script>
import Vue from "vue";
import { NumericTextBoxPlugin } from "@syncfusion/ej2-vue-inputs";

Vue.use(NumericTextBoxPlugin);
export default {
  data () {
    return {
      value: 10
    }
  }
}
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
 .wrap {
  margin: 0 auto;
  width: 240px;
  padding-top: 100px;
}
  .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>

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
app.vue
<template>
  <div id="app">
    <div class='wrap'>
      <form id="form-element" class="form-horizontal">
        <div class="form-group">
          <ejs-numerictextbox id="numericRange" name="numericRange" class="form-control" floatLabelType='Always' :min='min' :max='max' :strictMode='strictMode'  :created='onCreate' :change='onChange'></ejs-numerictextbox>
          <button type="button" id="submit_btn" style="margin-top: 40px" v-on:click="onClick">Submit</button>
        </div>
      </form>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { NumericTextBoxPlugin } from "@syncfusion/ej2-vue-inputs";
import { FormValidator, FormValidatorModel } from '@syncfusion/ej2-inputs';

Vue.use(NumericTextBoxPlugin);
export default {
  data () {
     // checks the value of NumericTextbox and returns the corresponding boolean value
      var customFn = function(args) {
         var numeric = document.getElementById('numericRange').ej2_instances[0];
          if(numeric.value>=10 && numeric.value<=100) {
              return true;
          }
          else {
              return false;
          }
      };

      // sets required property in the FormValidator rules collection
      var options = {
          rules: {
                  'numeric': { required: [true, "Number is required"] },
          },
      }
      // defines FormValidator to validate the NumericTextBox
      var formObject = new FormValidator('#form-element', options);

      // places error label outside the NumericTextBox using the customPlacement event of FormValidator
      formObject.customPlacement = function (element, errorElement) {
          element.parentNode.parentNode.parentNode.appendChild(errorElement);
      };
      //rules for validating the NumericTextbox
      formObject.addRules('numeric', { range: [customFn, "Please enter a number between 10 to 100"] })
     return {
       min : 10,
       max : 100,
       strictMode : false
     }
  },
  methods: {
    onCreate: function (event){
        document.getElementById("numericRange").setAttribute("name", "numeric");
    },
    onClick: function (event) {
       // checks the value of NumericTextbox and returns the corresponding boolean value
      var customFn = function(args) {
         var numeric = document.getElementById('numericRange').ej2_instances[0];
          if(numeric.value>=10 && numeric.value<=100) {
              return true;
          }
          else {
              return false;
          }
      };

      // sets required property in the FormValidator rules collection
      var options = {
          rules: {
                  'numeric': { required: [true, "Number is required"] },
          },
        }
      // defines FormValidator to validate the NumericTextBox
      var formObject = new FormValidator('#form-element', options);
      // places error label outside the NumericTextBox using the customPlacement event of FormValidator
      formObject.customPlacement = function (element, errorElement) {
          element.parentNode.parentNode.parentNode.appendChild(errorElement);
      };

      //rules for validating the NumericTextbox
      formObject.addRules('numeric', { range: [customFn, "Please enter a number between 10 to 100"] });
      formObject.validate("numeric");

       var ele = document.getElementById('numericRange').ej2_instances[0];
       // checks for incomplete value and alerts the formt submit
       if (ele.value >= 10 && ele.value <= 100) {
          alert("Submitted");
       }
    },
    onChange: function (args) {
        // checks the value of NumericTextbox and returns the corresponding boolean value
      var customFn = function(args) {
         var numeric = document.getElementById('numericRange').ej2_instances[0];
          if(numeric.value>=10 && numeric.value<=100) {
              return true;
          }
          else {
              return false;
          }
      };

      // sets required property in the FormValidator rules collection
      var options = {
          rules: {
                  'numeric': { required: [true, "Number is required"] },
          },
      }
      // defines FormValidator to validate the NumericTextBox
      var formObject = new FormValidator('#form-element', options);
      // places error label outside the NumericTextBox using the customPlacement event of FormValidator
      formObject.customPlacement = function (element, errorElement) {
          element.parentNode.parentNode.parentNode.appendChild(errorElement);
      };

      //rules for validating the NumericTextbox
      formObject.addRules('numeric', { range: [customFn, "Please enter a number between 10 to 100"] });
      var  numeric = document.getElementById('numericRange');
      if (numeric.value != null) {
        formObject.validate("numeric");
      }
    }
}
}
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
 .wrap {
    margin: 0 auto;
    width: 240px;
    padding-top: 100px;
}
   label.e-error {
      margin-top: -50px;
  }
</style>

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
app.vue
<template>
  <div id="app">
        <div class='wrap'>
           <ejs-numerictextbox id="numeric" :value='value' placeholder='NumericTextBox' :created='onCreate' floatLabelType='Always'></ejs-numerictextbox>
        </div>
  </div>
</template>
<script>
import Vue from "vue";
import { NumericTextBoxPlugin } from "@syncfusion/ej2-vue-inputs";

Vue.use(NumericTextBoxPlugin);
export default {
  data () {
    return {
      value : null
    }
  },
  methods: {
    onCreate: function (event) {
      var numericObj=document.getElementById("numeric").ej2_instances[0];
      //  prevents nullable value during initialization
      if (numericObj.value==null) {
        numericObj.value=0;
      }
      document.getElementById("numeric").addEventListener('blur',function(){
          if (numericObj.value==null) {
             numericObj.value=0;
          }
      });
   }
}
}
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
 .wrap {
  margin: 0 auto;
  width: 240px;
  padding-top: 100px;
}
</style>

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
app.vue
<template>
  <div id="app">
        <div class='wrap'>
           <ejs-numerictextbox id="numeric" :value='value' format='n2' :decimals='decimals' placeholder='NumericTextBox' :change='onChange' :created='onCreate'></ejs-numerictextbox>
        </div>
  </div>
</template>
<script>
import Vue from "vue";
import { NumericTextBoxPlugin } from "@syncfusion/ej2-vue-inputs";

Vue.use(NumericTextBoxPlugin);
export default {
  data () {
    return {
      value : 10,
      decimals : 2
    }
  },
  methods: {
    onChange: function (event) {
      var numericObj = document.getElementById("numeric").ej2_instances[0];
      numericObj.element.value = numericObj.formattedValue(numericObj.decimals, +numericObj.element.value);
    },
     onCreate: function (event) {
      document.getElementById("numeric").addEventListener('focus',function(){
        var numericObj = document.getElementById("numeric").ej2_instances[0];
        numericObj.element.value = numericObj.formattedValue(numericObj.decimals, +numericObj.element.value);
      });

   }
}
}
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
 .wrap {
  margin: 0 auto;
  width: 240px;
  padding-top: 100px;
}
</style>