React UI Components Documentation

Sets or gets whether the listbox's height is equal to the sum of each item's height

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source} autoHeight={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables/disables the dragging of ListBox Items.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source} allowDrag={true} allowDrop={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables/disables the dropping of ListBox Items.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source} allowDrag={true} allowDrop={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the listbox should display a checkbox next to each item.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source} checkboxes={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables/disables the listbox.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source} 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.

Sets or gets the drop action when an item is dropped.

'default'

'copy'-adds a clone of the dropped item

'none'-means that the dropped item will not be added to a new collection and will not be removed from its parent collection

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source} allowDrag={true} dropAction={'copy'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Callback function which is called when a drag operation starts.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        dragStart: (item: object): any => {
          console.log('Dragging: ' + item.label);
        },
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source} allowDrag={true} allowDrop={true} dragStart={this.state.dragStart}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Callback function which is called when a drag operation ends.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        dragEnd: (dragItem: object, dropItem: object): any => {
          console.log('Dropping: ' + dragItem.label);
        },
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source} allowDrag={true} allowDrop={true} dragEnd={this.state.dragEnd}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables/disables the hover state.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source} enableHover={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables/disables the selection.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source} enableSelection={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the items width should be equal to the listbox's width.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source} equalItemsWidth={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines whether the Filtering is enabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source} filterable={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines the Filter's height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source} filterable={true} filterHeight={30}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines the Filter's delay. After 100 milliseconds, the widget automatically filters its data based on the filter input's value. To perform filter only on "Enter" key press, set this property to 0.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source} filterable={true} filterDelay={300}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines the Filter input's place holder.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source} filterable={true} filterPlaceHolder={'Filtering...'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the listbox's height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source} height={200}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the checkboxes have three states - checked, unchecked and indeterminate.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source} checkboxes={true} hasThreeStates={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the height of the jqxListBox Items. When the itemHeight == - 1, each item's height is equal to its desired height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source} itemHeight={30}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the incrementalSearch property. An incremental search begins searching as soon as you type the first character of the search string. As you type in the search string, jqxListBox automatically selects the found item.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source} incrementalSearch={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets ot gets the incrementalSearchDelay property. The incrementalSearchDelay specifies the time-interval in milliseconds after which the previous search string is deleted. The timer starts when you stop typing.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source} incrementalSearchDelay={150}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables/disables the multiple selection. When this property is set to true, the user can select multiple items.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source} multiple={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables/disables the multiple selection using Shift and Ctrl keys. When this property is set to true, the user can select multiple items by clicking on item and holding Shift or Ctrl.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source} multipleextended={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Callback function which is called when an item is rendered. By using the renderer function, you can customize the look of the list items.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        renderer: (index: number, label: string | number, value: string | number): any => {
          return "<i>" + value + "</i>";
        },
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source} renderer={this.state.renderer}
      />
    );
  }
}
 
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 JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        rendered: (): any => {
          alert('rendered!')
        },
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source} rendered={this.state.rendered}
      />
    );
  }
}
 
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 JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source} rtl={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the selected index.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source} selectedIndex={2}
      />
    );
  }
}
 
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 JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        selectedIndexes: { 1: true, 3: true },
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source} multiple={true} selectedIndexes={this.state.selectedIndexes}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the item's source.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the scrollbars's size.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source} scrollBarSize={15}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the item incremental search mode. When the user types some text in a focused ListBox, the jqxListBox 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 JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source} searchMode={'contains'}
      />
    );
  }
}
 
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 JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source} 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.

Sets or gets the listbox's width.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source} width={200}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the data binding operation is completed.

Code examples

Bind to the bindingComplete event of jqxListBox.

This event is triggered when the user selects an item.

Code examples

Bind to the change event of jqxListBox.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} onChange={this.onChange} 
        source={this.state.source}
      />
    );
  }
 
  private onChange(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the user checks or unchecks an item.

Code examples

Bind to the checkChange event of jqxListBox.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myListBox.current!.setOptions({ checkboxes: true });
  }
   
  public render() {
    return (
      <JqxListBox ref={this.myListBox} onCheckChange={this.onCheckChange} 
        source={this.state.source}
      />
    );
  }
 
  private onCheckChange(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the user starts a drag operation.

Code examples

Bind to the dragStart event of jqxListBox.

This event is triggered when the user drops an item.

Code examples

Bind to the dragEnd event of jqxListBox.

This event is triggered when the user selects an item.

Code examples

Bind to the select event of jqxListBox.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} onSelect={this.onSelect} 
        source={this.state.source}
      />
    );
  }
 
  private onSelect(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the user unselects an item.

Code examples

Bind to the unselect event of jqxListBox.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
  
  public render() {
    return (
      <JqxListBox ref={this.myListBox} onUnselect={this.onUnselect} 
        source={this.state.source}
      />
    );
  }
 
  private onUnselect(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Adds a new item to the jqxListBox. Returns 'true', if the new item is added or 'false' if the item is not added.

• label - determines the item's label.
• value - determines the item's value.
• disabled - determines whether the item is enabled/disabled.
• checked - determines whether item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - determines the item's display html. This can be used instead of label.
• group - determines the item's group.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myListBox.current!.addItem('New Item');
  }
   
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Stops the ListBox's rendering. That method is usually used when multiple items need to be inserted or removed dynamically.

Clears all items.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myListBox.current!.clear();
  }
   
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Clears all selected items.

Checks a list item when the 'checkboxes' property value is true. The index is zero-based, i.e to check the first item, the 'checkIndex' method should be called with parameter 0.

Checks an item.

Checks all list items when the 'checkboxes' property value is true.

Clears the widget's filter when filtering is applied.

Destroy the jqxListBox widget. The destroy method removes the jqxListBox widget from the web page.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myListBox.current!.destroy();
  }
   
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Disables an item. Item is an object.

• label - determines the item's label.
• value - determines the item's value.
• disabled - determines whether the item is enabled/disabled.
• checked - determines whether item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - determines the item's display html. This can be used instead of label.
• group - determines the item's group.

Disables an item by index. Index is a number.

Enables an item. Item is an object.

• label - determines the item's label.
• value - determines the item's value.
• disabled - determines whether the item is enabled/disabled.
• checked - determines whether item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - determines the item's display html. This can be used instead of label.
• group - determines the item's group.

Enables a disabled item by index. Index is a number.

Ensures that an item is visible. Index is number. If necessary scrolls to the item. Insted of Index, you can also pass the item's value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myListBox.current!.ensureVisible(8);
  }
   
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Starts the ListBox's rendering and refreshes the ListBox. That method is usually used in combination with the 'beginUpdate' method when multiple items need to be inserted or removed dynamically.

Sets the focus to the jqxListBox.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myListBox.current!.focus();
  }
   
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets all items. The returned value is an array of Items.

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myListBox.current!.getItems();
  }
   
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the selected ListBox items. The returned value is an Array of items.

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myListBox.current!.getSelectedItems();
  }
   
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the checked ListBox items. Returns an Array of checked items.

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myListBox.current!.getCheckedItems();
  }
   
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets an item by index. The returned value is an object with the following fields:

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myListBox.current!.getItem(3);
  }
   
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets an item by its value. The returned value is an object with the following fields:

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myListBox.current!.getItemByValue('Breve');
  }
   
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the selected item. The returned value is an object or null(if there is no selected item).

• label - gets item's label.
• value - gets the item's value.
• disabled - gets whether the item is enabled/disabled.
• checked - gets whether the item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - gets the item's display html. This can be used instead of label.
• index - gets the item's index.
• group - gets the item's group.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myListBox.current!.getSelectedItem();
  }
   
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the index of the selected item. The returned value is the index of the selected item. If there's no selected item, -1 is returned.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myListBox.current!.getSelectedIndex();
  }
   
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Inserts a new item to the jqxListBox. Returns 'true', if the new item is inserted or false if the insertaion fails. The first parameter is object or string - the new item. The second parameter is number - the item's index.

• label - determines the item's label.
• value - determines the item's value.
• disabled - determines whether the item is enabled/disabled.
• checked - determines whether item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - determines the item's display html. This can be used instead of label.
• group - determines the item's group.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myListBox.current!.insertAt('New Item',1);
  }
   
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

The invalidate method will repaint the jqxListBox's items.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myListBox.current!.invalidate();
  }
   
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Indeterminates an item.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myListBox.current!.indeterminateItem('Breve');
  }
   
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

indeterminates a list item when the 'checkboxes' property value is true. The index is zero-based, i.e to indeterminate the first item, the 'indeterminateIndex' method should be called with parameter 0.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myListBox.current!.indeterminateIndex(3);
  }
   
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Method: loadFromSelect

Removes an item from the listbox. Parameter type: object returned by the "getItem" method or string - the value of an item. Returns 'true', if the item is removed or 'false', if the item is not removed.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myListBox.current!.removeItem('Breve');
  }
   
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Removes an item from the listbox. Parameter type: number - the index of the item. The method returns 'true', if the item is removed or 'false', if the item is not removed.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myListBox.current!.removeAt(3);
  }
   
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Renders the jqxListBox widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myListBox.current!.render();
  }
   
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Refreshes the jqxListBox widget. The refresh method will update the jqxListBox's layout, size and data.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myListBox.current!.refresh();
  }
   
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Selects an item.

Selects item. Index is number. The index is zero-based, i.e to select the first item, the 'selectIndex' method should be called with parameter 0.

Updates an item. The first parameter is the new item. The second parameter could be an existing item or the value of an existing item.

• label - determines the item's label.
• value - determines the item's value.
• disabled - determines whether the item is enabled/disabled.
• checked - determines whether item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - determines the item's display html. This can be used instead of label.
• group - determines the item's group.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myListBox.current!.updateItem('New Breve','Breve');
  }
   
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Updates an item. The first parameter is the new item. The second parameter is the index of the item to be updated.

• label - determines the item's label.
• value - determines the item's value.
• disabled - determines whether the item is enabled/disabled.
• checked - determines whether item is checked/unchecked.
• hasThreeStates - determines whether the item's checkbox supports three states.
• html - determines the item's display html. This can be used instead of label.
• group - determines the item's group.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myListBox.current!.updateAt('New Breve',3);
  }
   
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Unselects item by index. The index is zero-based, i.e to select the first item, the 'unselectIndex' method should be called with parameter 0.

Unselects an item.

Unchecks a list item when the 'checkboxes' property value is true. The index is zero-based, i.e to uncheck the first item, the 'uncheckIndex' method should be called with parameter 0.

Unchecks an item.

Unchecks all list items when the 'checkboxes' property value is true.

Sets or gets the selected value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxListBox, { IListBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxlistbox';
 
class App extends React.PureComponent<{}, IListBoxProps> {
  private myListBox = React.createRef<JqxListBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          "Affogato",
          "Americano",
          "Bicerin",
          "Breve",
          "Cafe Bombon",
          "Cafe au lait",
          "Caffe Corretto",
          "Cafe Crema",
          "Caffe Latte"
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myListBox.current!.val();
  }
   
  public render() {
    return (
      <JqxListBox ref={this.myListBox} 
        source={this.state.source}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);