React UI Components Documentation

Enables or disables the jqxFormattedInput.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();  
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
        disabled={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the notation in which to display decimal numbers.

Possible values

'default' - the default representation of decimal numbers, e.g. 1590;

'exponential' - representation of decimal numbers in scientific exponential notation (E notation), e.g. 1.59e+3.

Sets or gets whether the jqxFormattedInput's dropdown (pop-up) will be enabled. The dropdown allows the user to choose the radix (numeral system) of the displayed number.

Note: the dropdown requires an additional empty div element in the initialization div of jqxFormattedInput.

Sets or gets the width of the jqxFormattedInput's dropdown (pop-up).

Sets or gets the jqxFormattedInput's height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();  
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
        height={25} value={25300}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the minimum value of the widget. The value of min should be in the same numeral system as value. The min property can be set to no less than '-9223372036854775808' (-2⁶³) in decimal.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();  
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
        min={0} spinButtons={true} value={1} height={25}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the maximum value of the widget. The value of max should be in the same numeral system as value. The max property can be set to no more than '9223372036854775807' (2⁶³ - 1) in decimal.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();  
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
        max={111110100} spinButtons={true} value={11111101} height={25}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxFormattedInput's placeholder.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();  
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
        placeHolder={'Enter a number'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the pop-up's z-index.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();  
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
        popupZIndex={99999}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables or disables the rounded corners functionality. This property setting has effect in browsers which support CSS border-radius.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();  
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
        roundedCorners={false} height={25} width={250} spinButtons={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();  
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
        rtl={true} height={25} width={250} spinButtons={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the radix of the jqxFormattedInput. The radix specifies the numeral system in which to display the widget's value.

Possible values

2 or 'binary' - specifies the binary numeral system. Allowed characters for this numeral system are the digits 0 and 1;

8 or 'octal' - specifies the octal numeral system. Allowed characters for this numeral system are the digits from 0 to 7;

10 or 'decimal' - specifies the decimal numeral system. Allowed characters for this numeral system are the digits from 0 to 9;

16 or 'hexadecimal' - specifies the hexadecimal numeral system. Allowed characters for this numeral system are the digits from 0 to 9 and letters from a to f (case insenstive).

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();  
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
        radix={'hexadecimal'} value={'fd'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Shows or hides the spin buttons.

Note: the spin buttons require an additional empty div element in the initialization div of jqxFormattedInput.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();  
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
        spinButtons={true} height={25}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the increase/decrease step. The value of spinButtonsStep is a decimal number.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();  
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
        spinButtons={true} spinButtonsStep={3} height={25} width={250}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines the template as an alternative of the default styles.

'default' - the default template. The style depends only on the "theme" property value.

'primary' - dark blue style for extra visual weight.

'success' - green style for successful or positive action.

'warning' - orange style which indicates caution.

'danger' - red style which indicates a dangerous or negative action.

'info' - blue button, not tied to a semantic action or use.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();  
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
        template={'primary'} spinButtons={true} height={25} width={250}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();  
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
        theme={'material'} spinButtons={true} height={25} width={250}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether to use upper case when the radix property is set to 16 or 'hexadecimal'.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();  
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
        upperCase={true} radix={'hexadecimal'} value={'fd'} height={25}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the value of the jqxFormattedInput widget. The value is in the numeral system specified by the radix property.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();  
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
        value={25300} height={25}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxFormattedInput's width.

This event is triggered when the value is changed.

Code examples

Bind to the change event of jqxFormattedInput.

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

Code examples

Bind to the close event of jqxFormattedInput.

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

Code examples

Bind to the open event of jqxFormattedInput.

This event is triggered when the radix is changed.

Code examples

Bind to the radixChange event of jqxFormattedInput.

Closes the jqxFormattedInput pop-up.

Destroys the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();
 
  public componentDidMount(): void {
    this.myFormattedInput.current!.destroy();
  }
   
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Focuses the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();
 
  public componentDidMount(): void {
    this.myFormattedInput.current!.focus();
  }
   
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Opens the jqxFormattedInput pop-up.

Renders the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();
 
  public componentDidMount(): void {
    this.myFormattedInput.current!.render();
  }
   
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Refreshes the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();
 
  public componentDidMount(): void {
    this.myFormattedInput.current!.refresh();
  }
   
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Selects the text in the input field.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();
 
  public componentDidMount(): void {
    this.myFormattedInput.current!.selectAll();
  }
   
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Positions the caret in the beginning of the number in the input.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();
 
  public componentDidMount(): void {
    this.myFormattedInput.current!.selectFirst();
  }
   
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Positions the caret at the end of the number in the input.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();
 
  public componentDidMount(): void {
    this.myFormattedInput.current!.selectLast();
  }
   
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxFormattedInput, { IFormattedInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxformattedinput';
 
class App extends React.PureComponent<{}, IFormattedInputProps> {
  private myFormattedInput = React.createRef<JqxFormattedInput>();
 
  public componentDidMount(): void {
    this.myFormattedInput.current!.val();
  }
   
  
  public render() {
    return (
      <JqxFormattedInput ref={this.myFormattedInput} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);