React UI Components Documentation

Enables or disables the jqxTextArea.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea, { ITextAreaProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
 
class App extends React.PureComponent<{}, ITextAreaProps> {
  private myTextArea = React.createRef<JqxTextArea>();  
  
  public render() {
    return (
      <JqxTextArea ref={this.myTextArea} 
        width={200} height={50} placeHolder={'Enter a Country'} disabled={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the displayMember of the Items. The displayMember specifies the name of an object property to display. The name is contained in the collection specified by the 'source' property.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea, { ITextAreaProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
 
class App extends React.PureComponent<{}, ITextAreaProps> {
  private myTextArea = React.createRef<JqxTextArea>();  
     
  constructor(props: {}) {
    super(props);
     
    this.state = {
        displayMember: 'ContactName',
        source: [{ 'CompanyName': 'Company1',  'ContactName': 'Ana' }, { 'CompanyName': 'Company2', 'ContactName': 'Maria' }]
    }
  }  
  
  public render() {
    return (
      <JqxTextArea ref={this.myTextArea} 
        width={200} height={50} placeHolder={'Enter a Country'} displayMember={this.state.displayMember}
        source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea, { ITextAreaProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
 
class App extends React.PureComponent<{}, ITextAreaProps> {
  private myTextArea = React.createRef<JqxTextArea>();  
     
  constructor(props: {}) {
    super(props);
     
    this.state = {
        dropDownWidth: 300,
        source: [ 'Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Brazil', 'Brunei', 'Bulgaria' ]
    }
  }  
  
  public render() {
    return (
      <JqxTextArea ref={this.myTextArea} 
        width={200} height={50} placeHolder={'Enter a Country'} dropDownWidth={this.state.dropDownWidth}
        source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxTextArea's height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea, { ITextAreaProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
 
class App extends React.PureComponent<{}, ITextAreaProps> {
  private myTextArea = React.createRef<JqxTextArea>();  
  
  public render() {
    return (
      <JqxTextArea ref={this.myTextArea} 
        width={200} height={50} placeHolder={'Enter a Country'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the maximum number of items to display in the popup menu.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea, { ITextAreaProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
 
class App extends React.PureComponent<{}, ITextAreaProps> {
  private myTextArea = React.createRef<JqxTextArea>();  
     
  constructor(props: {}) {
    super(props);
     
    this.state = {
        items: 3,
        source: [ 'Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Brazil', 'Brunei', 'Bulgaria' ]
    }
  }  
  
  public render() {
    return (
      <JqxTextArea ref={this.myTextArea} 
        width={200} height={50} placeHolder={'Enter a Country'} items={this.state.items}
        source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the maximum character length of the textarea.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea, { ITextAreaProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
 
class App extends React.PureComponent<{}, ITextAreaProps> {
  private myTextArea = React.createRef<JqxTextArea>();  
  
  public render() {
    return (
      <JqxTextArea ref={this.myTextArea} 
        width={200} height={50} placeHolder={'Enter a Country'} maxLength={10}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the minimum character length needed before triggering auto-complete suggestions.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea, { ITextAreaProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
 
class App extends React.PureComponent<{}, ITextAreaProps> {
  private myTextArea = React.createRef<JqxTextArea>();  
  
  public render() {
    return (
      <JqxTextArea ref={this.myTextArea} 
        width={200} height={50} placeHolder={'Enter a Country'} minLength={2}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets a value indicating whether the auto-suggest popup is opened.

Sets or gets the textarea's placeholder.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea, { ITextAreaProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
 
class App extends React.PureComponent<{}, ITextAreaProps> {
  private myTextArea = React.createRef<JqxTextArea>();  
  
  public render() {
    return (
      <JqxTextArea ref={this.myTextArea} 
        width={200} height={50} placeHolder={'Enter a Country'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the auto-suggest popup'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 JqxTextArea, { ITextAreaProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
 
class App extends React.PureComponent<{}, ITextAreaProps> {
  private myTextArea = React.createRef<JqxTextArea>();  
     
  constructor(props: {}) {
    super(props);
     
    this.state = {
        popupZIndex: 99999,
        source: [ 'Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Brazil', 'Brunei', 'Bulgaria' ]
    }
  }  
  
  public render() {
    return (
      <JqxTextArea ref={this.myTextArea} 
        width={200} height={50} placeHolder={'Enter a Country'} popupZIndex={this.state.popupZIndex}
        source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines the textarea's query.

Enables you to update the textarea's value, after a selection from the auto-complete popup.

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 JqxTextArea, { ITextAreaProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
 
class App extends React.PureComponent<{}, ITextAreaProps> {
  private myTextArea = React.createRef<JqxTextArea>();  
  
  public render() {
    return (
      <JqxTextArea ref={this.myTextArea} 
        width={200} height={50} placeHolder={'Enter a Country'} roundedCorners={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 JqxTextArea, { ITextAreaProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
 
class App extends React.PureComponent<{}, ITextAreaProps> {
  private myTextArea = React.createRef<JqxTextArea>();  
  
  public render() {
    return (
      <JqxTextArea ref={this.myTextArea} 
        width={200} height={50} placeHolder={'Enter a Country'} rtl={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the size of the scrollbar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea, { ITextAreaProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
 
class App extends React.PureComponent<{}, ITextAreaProps> {
  private myTextArea = React.createRef<JqxTextArea>();  
  
  public render() {
    return (
      <JqxTextArea ref={this.myTextArea} 
        width={200} height={50} placeHolder={'Enter a Country'} scrollBarSize={15}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the search mode. When the user types into the textarea, the widget tries to find the searched item using the entered text and the selected search mode.

'none'

'contains'

'containsignorecase'

'equals'

'equalsignorecase'

'startswithignorecase'

'startswith'

'endswithignorecase'

'endswith'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea, { ITextAreaProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
 
class App extends React.PureComponent<{}, ITextAreaProps> {
  private myTextArea = React.createRef<JqxTextArea>();  
     
  constructor(props: {}) {
    super(props);
     
    this.state = {
        searchMode: 'containsignorecase',
        source: [ 'Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Brazil', 'Brunei', 'Bulgaria' ]
    }
  }  
  
  public render() {
    return (
      <JqxTextArea ref={this.myTextArea} 
        width={200} height={50} placeHolder={'Enter a Country'} searchMode={this.state.searchMode}
        source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets the widget's data source. The 'source' function is passed two arguments, the textarea's value and a callback function. The 'source' function may be used synchronously by returning an array of items or asynchronously via the callback.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea, { ITextAreaProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
 
class App extends React.PureComponent<{}, ITextAreaProps> {
  private myTextArea = React.createRef<JqxTextArea>();  
   
  constructor(props: {}) {
    super(props);
      
    this.state = {
        source: return [ 'Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Brazil', 'Brunei', 'Bulgaria' ]
    }
  }  
  
  public render() {
    return (
      <JqxTextArea ref={this.myTextArea} 
        width={200} height={50} placeHolder={'Enter a Country'} source={this.state.source}
      />
    );
  }
}
 
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 JqxTextArea, { ITextAreaProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
 
class App extends React.PureComponent<{}, ITextAreaProps> {
  private myTextArea = React.createRef<JqxTextArea>();  
  
  public render() {
    return (
      <JqxTextArea ref={this.myTextArea} 
        width={200} height={50} placeHolder={'Enter a Country'} theme={'material'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the valueMember of the Items. The valueMember specifies the name of an object property to set as a 'value' of the list items. The name is contained in the collection specified by the 'source' property.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea, { ITextAreaProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
 
class App extends React.PureComponent<{}, ITextAreaProps> {
  private myTextArea = React.createRef<JqxTextArea>();  
     
  constructor(props: {}) {
    super(props);
     
    this.state = {
        valueMember: 'CompanyName',
        source: [{ 'CompanyName': 'Company1',  'ContactName': 'Ana' }, { 'CompanyName': 'Company2', 'ContactName': 'Maria' }]
    }
  }  
  
  public render() {
    return (
      <JqxTextArea ref={this.myTextArea} 
        width={200} height={50} placeHolder={'Enter a Country'} valueMember={this.state.valueMember}
        source={this.state.source} displayMember={'ContactName'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxTextArea's width.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea, { ITextAreaProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
 
class App extends React.PureComponent<{}, ITextAreaProps> {
  private myTextArea = React.createRef<JqxTextArea>();  
  
  public render() {
    return (
      <JqxTextArea ref={this.myTextArea} 
        width={200} height={50} placeHolder={'Enter a Country'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the value is changed.

Code examples

Bind to the change event of jqxTextArea.

This event is triggered when the auto-suggest popup is closed.

Code examples

Bind to the close event of jqxTextArea.

This event is triggered when the auto-suggest popup is opened.

Code examples

Bind to the open event of jqxTextArea.

This event is triggered when an item is selected from the auto-suggest popup.

Code examples

Bind to the select event of jqxTextArea.

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 JqxTextArea, { ITextAreaProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
 
class App extends React.PureComponent<{}, ITextAreaProps> {
  private myTextArea = React.createRef<JqxTextArea>();
 
  public componentDidMount(): void {
    this.myTextArea.current!.destroy();
  }
   
  
  public render() {
    return (
      <JqxTextArea ref={this.myTextArea} 
        width={200} height={50} placeHolder={'Enter a Country'}
      />
    );
  }
}
 
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 JqxTextArea, { ITextAreaProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
 
class App extends React.PureComponent<{}, ITextAreaProps> {
  private myTextArea = React.createRef<JqxTextArea>();
 
  public componentDidMount(): void {
    this.myTextArea.current!.focus();
  }
   
  
  public render() {
    return (
      <JqxTextArea ref={this.myTextArea} 
        width={200} height={50} placeHolder={'Enter a Country'}
      />
    );
  }
}
 
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 JqxTextArea, { ITextAreaProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
 
class App extends React.PureComponent<{}, ITextAreaProps> {
  private myTextArea = React.createRef<JqxTextArea>();
 
  public componentDidMount(): void {
    this.myTextArea.current!.refresh();
  }
   
  
  public render() {
    return (
      <JqxTextArea ref={this.myTextArea} 
        width={200} height={50} placeHolder={'Enter a Country'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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 JqxTextArea, { ITextAreaProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
 
class App extends React.PureComponent<{}, ITextAreaProps> {
  private myTextArea = React.createRef<JqxTextArea>();
 
  public componentDidMount(): void {
    this.myTextArea.current!.render();
  }
   
  
  public render() {
    return (
      <JqxTextArea ref={this.myTextArea} 
        width={200} height={50} placeHolder={'Enter a Country'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Selects the text in the textarea.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxTextArea, { ITextAreaProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
 
class App extends React.PureComponent<{}, ITextAreaProps> {
  private myTextArea = React.createRef<JqxTextArea>();
 
  public componentDidMount(): void {
    this.myTextArea.current!.selectAll();
  }
   
  
  public render() {
    return (
      <JqxTextArea ref={this.myTextArea} 
        width={200} height={50} placeHolder={'Enter a Country'}
      />
    );
  }
}
 
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 JqxTextArea, { ITextAreaProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtextarea';
 
class App extends React.PureComponent<{}, ITextAreaProps> {
  private myTextArea = React.createRef<JqxTextArea>();
 
  public componentDidMount(): void {
    this.myTextArea.current!.val();
  }
   
  
  public render() {
    return (
      <JqxTextArea ref={this.myTextArea} 
        width={200} height={50} placeHolder={'Enter a Country'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);