Properties

NameTypeDefault
disabled boolean false

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);
displayMember string ''

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);
dropDownWidth number | string null

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);
height string | number null

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);
items number 8

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);
maxLength number null

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);
minLength number 1

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);
opened boolean false

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

placeHolder string ''

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);
popupZIndex number 20000

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);
query string ''

Determines the textarea's query.

renderer (itemValue: any, inputValue: any) => any null

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

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 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);
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 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);
scrollBarSize number 15

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);
searchMode TextAreaSearchMode 'default'
TextAreaSearchMode: "none" | "contains" | "containsignorecase" | "equals" | "equalsignorecase" | "startswithignorecase" | "startswith" | "endswithignorecase" | "endswith"

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.

Possible Values: 
'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);
source any []

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);
theme string '' 
/* 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);
valueMember string ''

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);
width string | number null

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);

Events

change Event

This event is triggered when the value is changed.

Code examples

Bind to the change event of jqxTextArea.

close Event

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

Code examples

Bind to the close event of jqxTextArea.

open Event

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

Code examples

Bind to the open event of jqxTextArea.

select Event

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

Code examples

Bind to the select event of jqxTextArea.

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 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);
focus None

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);
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 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);
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 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);
selectAll None

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);
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 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);