All Components

You are on the site of the Kendo UI Wrappers for React suite which contains wrappers for the Kendo UI for jQuery widgets. To explore the brand-new set of Kendo UI for React components which are built from the ground up, go to the Kendo UI for React suite.

NumericTextBox Overview

The NumericTextBox enables the user to edit and submit specific numeric values by typing or by using the spin buttons.

It converts an <input> element into a numeric, percentage, or currency textbox. The conversion data type depends on the specific format. The component renders spin buttons which increase or decrease its value with a predefined step. The NumericTextBox accepts only numeric entries and uses the kendo.culture.current culture to determine the number precision and other culture-specific properties. When the NumericTextBox initializes, it wraps the <input> element with a <span></span> tag and renders Spin buttons.

The NumericTextBox wrapper for React is a client-side wrapper for Kendo UI NumericTextBox widget.

Basic Usage

The following example demonstrates the NumericTextBox in action.

class NumericTextBoxContainer extends React.Component {
    constructor(props) {
        super(props);
        this.value = props.value;
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                   <NumericTextBox value={this.value} />
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <NumericTextBoxContainer value={ 12.3456 } />,
    document.querySelector('my-app')
);

Features and Functionalities

Events

The following example demonstrates basic NumericTextBox events. You can subscribe to all NumericTextBox events by the handler name.

class NumericTextBoxContainer extends React.Component {
    constructor(props) {
        super(props);
        this.onChange = this.onChange.bind(this);
        this.onSpin = this.onSpin.bind(this);
    }

    onChange = (e) => {
        console.log("event :: change");
    }

    onSpin = (e) => {
        console.log("event :: spin");
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                   <NumericTextBox
                        change={this.onChange}
                        spin={this.onSpin}/>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <NumericTextBoxContainer />,
    document.querySelector('my-app')
);
In this article