Properties

NameTypeDefault
decimalNotation ComplexInputDecimalNotation 'default'
ComplexInputDecimalNotation: "default" | "exponential" | "scientific" | "engineering"

Sets or gets the notation in which to display the real and imaginary parts of the complex number.

Possible Values: 
'default' - decimal notation, e.g. '330000 - 200i'
'exponential', e.g. '3.3e+5 - 2e+2i'
'scientific', e.g. '3.3x103 - 2x102i'
'engineering', e.g. '330x103 - 200x10oi'
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();  
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'} decimalNotation={'exponential'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
disabled boolean false

Enables or disables the jqxComplexInput. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();  
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'} disabled={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
height string | number null

Sets or gets the jqxComplexInput's height. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();  
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
placeHolder string ''

Sets or gets the jqxComplexInput's placeholder. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();  
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'} placeHolder={'Enter a complex number'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
roundedCorners boolean true

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 JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();  
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'} roundedCorners={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
rtl boolean false

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 JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();  
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'} rtl={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
spinButtons boolean false

Shows or hides the spin buttons.

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

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();  
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'} spinButtons={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
spinButtonsStep number 1

Sets or gets the increase/decrease step. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();  
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'} spinButtons={true} spinButtonsStep={10}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
template ComplexInputTemplate 'default'
ComplexInputTemplate: "default" | "primary" | "success" | "warning" | "danger" | "info"

Determines the template as an alternative of the default styles.

Possible Values: 
'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 JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();  
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'} template={'primary'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
theme string '' 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();  
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'} theme={'material'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
value string ''

Sets or gets the value of the jqxComplexInput widget. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();  
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'190 - 17i'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
width string | number null

Sets or gets the jqxComplexInput's width. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();  
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Events

change Event

This event is triggered when the value is changed.

Code examples

Bind to the change event of jqxComplexInput. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();  
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} onChange={this.onChange} 
        width={250} height={25} value={'15 + 7.2i'}
      />
    );
  }
 
  private onChange(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Methods

NameArgumentsReturn Type
destroy None

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 JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();
 
  public componentDidMount(): void {
    this.myComplexInput.current!.destroy();
  }
   
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
getDecimalNotation part, decimalNotation

Method: getDecimalNotation

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();
 
  public componentDidMount(): void {
    this.myComplexInput.current!.getDecimalNotation();
  }
   
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
getReal complexnumber

Gets the real part of the entered number. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();
 
  public componentDidMount(): void {
    this.myComplexInput.current!.getReal();
  }
   
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
getImaginary complexnumber

Gets the imaginary part of the entered number. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();
 
  public componentDidMount(): void {
    this.myComplexInput.current!.getImaginary();
  }
   
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
render None

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 JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();
 
  public componentDidMount(): void {
    this.myComplexInput.current!.render();
  }
   
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
refresh None

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 JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();
 
  public componentDidMount(): void {
    this.myComplexInput.current!.refresh();
  }
   
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
val value

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 JqxComplexInput, { IComplexInputProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcomplexinput';
 
class App extends React.PureComponent<{}, IComplexInputProps> {
  private myComplexInput = React.createRef<JqxComplexInput>();
 
  public componentDidMount(): void {
    this.myComplexInput.current!.val();
  }
   
  
  public render() {
    return (
      <JqxComplexInput ref={this.myComplexInput} 
        width={250} height={25} value={'15 + 7.2i'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);