Properties

NameTypeDefault
disabled Boolean false

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25} disabled={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
decimalNotation String "default"

Sets or gets the decimalNotation property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25} decimalNotation={'exponential'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
dropDown Boolean false

Sets or gets the dropDown property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25} dropDown={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
dropDownWidth Number null

Sets or gets the dropDownWidth property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25} dropDownWidth={200}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
height Number null

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
min String '-9223372036854775808'

Sets or gets the min property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25} min={0}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
max String '9223372036854775807'

Sets or gets the max property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25} max={111110100}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
placeHolder String ''

Sets or gets the placeHolder property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25} placeHolder={'Enter a number'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
popupZIndex Number 20000

Sets or gets the popupZIndex property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25} popupZIndex={99999}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
roundedCorners Boolean true

Sets or gets the roundedCorners property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25} roundedCorners={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
rtl Boolean false

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25} rtl={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
radix Number | String 10

Sets or gets the radix property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25} radix={'hexadecimal'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
spinButtons Boolean true

Sets or gets the spinButtons property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25} spinButtons={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
spinButtonsStep Number 1

Sets or gets the spinButtonsStep property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25} spinButtons={true} spinButtonsStep={3}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
template String 'default'

Sets or gets the template property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25} template={'primary'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
theme String ''

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25} theme={'energyblue'}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
upperCase Boolean false

Sets or gets the upperCase property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25} upperCase={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
value String '0'

Sets or gets the value property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25} value={0}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
width Number null

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Events

change Event

This event is triggered when the value is changed.

Code examples

Bind to the change event of jqxFormattedInput. 

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myFormattedInput.on('change', (event) => {
            // Do Something...
        });
    }

    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
close Event

This event is triggered when the pop-up is closed.

Code examples

Bind to the close event of jqxFormattedInput. 

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myFormattedInput.on('close', (event) => {
            // Do Something...
        });
    }

    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
open Event

This event is triggered when the pop-up is opened.

Code examples

Bind to the open event of jqxFormattedInput. 

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myFormattedInput.on('open', (event) => {
            // Do Something...
        });
    }

    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
radixChange Event

This event is triggered when the radix is changed.

Code examples

Bind to the radixChange event of jqxFormattedInput. 

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myFormattedInput.on('radixChange', (event) => {
            // Do Something...
        });
    }

    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Methods

NameReturn Type
close None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myFormattedInput.close();
    }

    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
destroy None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myFormattedInput.destroy();
    }

    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
focus None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myFormattedInput.focus();
    }

    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
open None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myFormattedInput.open();
    }

    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
render None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myFormattedInput.render();
    }

    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
refresh None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myFormattedInput.refresh();
    }

    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
selectAll None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myFormattedInput.selectAll();
    }

    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
selectFirst None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myFormattedInput.selectFirst();
    }

    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
selectLast None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myFormattedInput.selectLast();
    }

    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));
val String 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxFormattedInput from 'jqwidgets-react/react_jqxformattedinput.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myFormattedInput.val();
    }

    render() {       
        
        return (
            <JqxFormattedInput ref='myFormattedInput'
                width={250} height={25}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));