Custom Handling of User Input

The NumericTextBox enables you to implement custom approaches for parsing and formatting the user input.

import { IntlProvider } from '@progress/kendo-react-intl';

class HexProvider extends IntlProvider {
    getChildContext() {
        let childContext = super.getChildContext();
        childContext.kendoIntlService.formatNumber = function (dec) {
            return (dec !== null) ? Math.floor(dec).toString(16) : '';
        };
        childContext.kendoIntlService.parseNumber = function (hex) {
            return parseInt(hex, 16);
        };
        return childContext;
    }
}
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 11256099
        }
    }
    render() {
        return (
            <div className="example-wrapper row">
                <div class="col-xs-12 col-sm-12 example-col">
                    <label>
                        <HexProvider locale="en">
                            <NumericTextBox
                                value={this.state.value}
                                onChange={(e) => this.setState({ value: e.value })}
                            />
                        </HexProvider> HEX
                    </label>
                </div>
                <div class="col-xs-12 col-sm-12 example-col">
                    <label>
                        <NumericTextBox
                            format="n0"
                            value={this.state.value}
                            onChange={(e) => this.setState({ value: e.value })}
                        /> DEC
                    </label>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
In this article
 /