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.tsx
index.html
styles.css
import * as React from "react";
import * as ReactDOM from "react-dom";
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';

// initializes NumericTextBox component
// sets value to the NumericTextBox
ReactDOM.render(<NumericTextBoxComponent value={10}>
</NumericTextBoxComponent>,document.getElementById('numericContainer'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 React NumericTextBox</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="React 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-react-inputs/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div class='wrap'>
        <div id='numericContainer'>
            <div id='loader'>Loading....</div>
        </div>
    </div>
</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.tsx
index.html
styles.css
import * as React from "react";
import * as ReactDOM from "react-dom";
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';

// initializes NumericTextBox component
// sets the step value as '2' to increase/decrease the value by '2'
// sets the showSpinButton value as `false` to hide the spin buttons
ReactDOM.render(<NumericTextBoxComponent step={2} showSpinButton={false} min={10} max={100} value={16} >
</NumericTextBoxComponent>,document.getElementById('numericContainer'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 React NumericTextBox</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="React 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-react-inputs/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div class='wrap'>
        <div id='numericContainer'>
            <div id='loader'>Loading....</div>
        </div>
    </div>
</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.tsx
index.html
import * as React from "react";
import * as ReactDOM from "react-dom";
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';

// initializes NumericTextBox component
export default class App extends React.Component<{}, {}> {
  render() {
    return (
      <NumericTextBoxComponent id="sample" value={10} cssClass={'e-style'} placeholder="Enter value" floatLabelType={'Always'}/>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('numericContainer'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 React NumericTextBox</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="React 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-react-inputs/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div class='wrap'>
            <div id='numericContainer'>
                <div id='loader'>Loading....</div>
                <input  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>
</body>
</html>

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.tsx
index.html
import * as React from "react";
import * as ReactDOM from "react-dom";
import { FormValidator, FormValidatorModel } from '@syncfusion/ej2-inputs';
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
import { Button } from '@syncfusion/ej2-buttons';

// initializes NumericTextBox component
class App extends React.Component<{}, {}> {
   private numericContainer: NumericTextBoxComponent;
   private formObject: FormValidator;

   public onChange(args){
        if (numeric.value != null)
            this.formObject.validate("numeric");
        }
   public onCreate(): void{
      // checks the value of NumericTextbox and returns the corresponding boolean value
        let customFn: (args: { [key: string]: string }) => boolean = (args: { [key: string]: string }) => {
          if(numeric.value>=10 && numeric.value<=100) {
            return true;
          }
          else {
            return false;
         }
        };
        let options: FormValidatorModel = {
            rules: {
                //must specify the name attribute value in rules section with required validation
                'numeric': { required: [true, "Number is required"] },
            },
            customPlacement: (inputElement: HTMLElement, errorElement: HTMLElement) => {
                //to place the error message in custom position
                //errorElement - error text which will be displayed.
                inputElement.parentNode.parentNode.parentNode.appendChild(errorElement);
            }
        };
        // defines FormValidator to validate the NumericTextBox
        this.formObject = new FormValidator('#form-element', options);

        //FormValidator rule is added  validating the NumericTextBox
        this.formObject.addRules('numeric', { range: [customFn, "Please enter a number between 10 to 100"] });
        var proxy = this;
        document.getElementById('submit_btn').addEventListener('click', function() {
              proxy.formObject.validate('numeric');
              let ele: HTMLInputElement =document.getElementById('numeric');
               // checks for incomplete value and alerts the formt submit
              if (ele.value !== "" && ele.value >=10 && ele.value<=100) {
                alert("Submitted");
               }
        });
   }
   render() {
     return (
          <div>
            <NumericTextBoxComponent id="numeric"  placeholder="NumericTextbox" min= {10} max={100} strictMode={false} ref={(numeric) => { this.numericContainer = numeric as NumericTextBoxComponent; }}  change={this.onChange.bind(this)} created={this.onCreate.bind(this)} floatLabelType='Always' />
            <button id="submit_btn" style={{ marginTop: '10px' }}>Submit</button>
          </div>
     );
   }
};
ReactDOM.render(<App />, document.getElementById('numericContainer'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 React NumericTextBox</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="React 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-react-inputs/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
       <div class='wrap'>
            <form id="form-element" class="form-horizontal">
                <div class="form-group">
                   <div id='numericContainer'>
                   </div>
                </div>
            </form>
        </div>
<style>
    .e-numeric.e-control-wrapper {
        margin-bottom: 20px;
    }
    label.e-error {
        margin-top: -45px;
    }
</style>

</body>
</html>

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.tsx
index.html
styles.css
import * as React from "react";
import * as ReactDOM from "react-dom";
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';

class App extends React.Component<{}, {}> {
  private numericInstance: NumericTextBoxComponent;
  //  prevents nullable value during initialization
  public onCreate() {
        if (this.value == null) {
              this.value = 0;
        }
        document.getElementById("numeric").addEventListener('blur',(event:any)=>{
              if (this.value == null) {
                 this.value = 0;
              }
        });
  }
render() {
    return (
      <NumericTextBoxComponent id="numeric" ref={(numeric) => { this.numericInstance = numeric as NumericTextBoxComponent; }} created={this.onCreate} />
    );
  }
}
ReactDOM.render(<App />, document.getElementById('numeric1'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 React NumericTextBox</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="React 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-react-inputs/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div class='wrap'>
        <div id='numeric1'>
            <div id='loader'>Loading....</div>
        </div>
    </div>
</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;
}

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.tsx
index.html
styles.css
import * as React from "react";
import * as ReactDOM from "react-dom";
import { NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';

class App extends React.Component<{}, {}> {
      private numericInstance: NumericTextBoxComponent;

      public numericFocus(): void {
        var numericObj =  this;
        numericObj.element.value = numericObj.formattedValue(numericObj.decimals, +numericObj.element.value);
      }
      public onCreate(): void{
        document.getElementById("numeric").addEventListener('focus', function(event){
        var numericObj = this.ej2_instances ? this.ej2_instances[0] : this;
        numericObj.element.value = numericObj.formattedValue(numericObj.decimals, +numericObj.element.value);
      });
 }
  render() {
    return (
      <NumericTextBoxComponent id="numeric" decimals={2} format={"n2"} ref={(numeric) => { this.numericInstance = numeric as NumericTextBoxComponent; }}  value={10} change={this.numericFocus} created={this.onCreate.bind(this)} />
    );
  }
}
ReactDOM.render(<App />, document.getElementById('numeric1'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 React NumericTextBox</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="React 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-react-inputs/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div class='wrap'>
        <div id='numeric1'>
            <div id='loader'>Loading....</div>
        </div>
    </div>
</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;
}