React UI Components Documentation

Sets the type of the animation.

'fade'

'slide'

'none'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4} animationType={'fade'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the whether the 'autoComplete' feature is enabled or disabled. When this feature is enabled, the jqxComboBox displays in the popup listbox, only the items that match the searched text.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4} autoComplete={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the DropDown is automatically opened when the mouse cursor is moved over the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4} autoOpen={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether items will wrap when they reach the width of the dropDown.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={100} height={25} source={this.state.source} selectedIndex={4} autoItemsHeight={true}
        dropDownHeight={250}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the height of the jqxComboBox's ListBox displayed in the widget's DropDown is calculated as a sum of the items heights.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4} autoDropDownHeight={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets the delay of the 'close' animation.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4} closeDelay={2000}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines whether checkboxes will be displayed next to 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 JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4} checkboxes={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables/disables the jqxComboBox.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4} 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 DropDown's alignment.

'left'

'right'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4} dropDownWidth={340}
        dropDownHorizontalAlignment={'left'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the DropDown's alignment.

'top'

'bottom'

Sets or gets the height of the jqxComboBox's ListBox displayed in the widget's DropDown.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4} dropDownHeight={300}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the width of the jqxComboBox's ListBox displayed in the widget's DropDown.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4} dropDownWidth={300}
      />
    );
  }
}
 
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 JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4} 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 JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4} enableSelection={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the dropdown detects the browser window's bounds and automatically adjusts the dropdown's position.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4} enableBrowserBoundsDetection={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxComboBox height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the height of the jqxComboBox 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 JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4} itemHeight={25}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines whether the jqxComboBox is in multi-select mode.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4} multiSelect={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines the minimum number of characters that need to be entered by the user for search in remote data source when remoteAutoComplete property is set to true.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4} minLength={2}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the delay of the 'open' animation.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4} openDelay={2000}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the 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 JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4} popupZIndex={2000}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the input field'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 JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={-1}
        placeHolder={'Please type an item'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines whether the items displayed in the popup come from a remote data source. When this property is set to true, the jqxComboBox calls the 'search' callback function when the user types into the input field.

Determines the delay between two keystrokes. The search callback function is called on timeout. The value is specified in milliseconds.

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

Callback function which is called when the selected item is rendered. By using the renderSelectedItem function, you can customize the displayed text in the ComboBox's input field.

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 JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4} 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 JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={0}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines whether the jqxComboBox shows its dropdown button.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4} showArrow={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines whether the jqxComboBox shows the items close buttons in multi-select mode.

Sets or gets the item search mode. When the user types into the edit field, the jqxComboBox 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 JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={-1}
        searchMode={'contains'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Callback function which is called when the 'remoteAutoComplate' property is set to true and the user types into the ComboBox's input field.

Sets or gets the items source.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the scrollbars size.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4} scrollBarSize={10}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines the button's template as an alternative of the default styles.

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

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

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

'warning' - orange style which indicates caution.

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

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

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4} template={'success'}
      />
    );
  }
}
 
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 JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4} theme={'material'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines whether an item can be selected in multi-select mode.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        validateSelection: (itemValue: string): any => {
          return itemValue === 'Breve';
        },
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4} validateSelection={this.state.validateSelection}
        multiSelect={true}
      />
    );
  }
}
 
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 jqxComboBox's width.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
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 jqxComboBox.

This event is triggered when an item is checked/unchecked.

Code examples

Bind to the checkChange event of jqxComboBox.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myComboBox.current!.setOptions({ checkboxes: true });
  }
   
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} onCheckChange={this.onCheckChange} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
 
  private onCheckChange(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the popup ListBox is closed.

Code examples

Bind to the close event of jqxComboBox.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} onClose={this.onClose} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
 
  private onClose(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the user selects an item.

Code examples

Bind to the change event of jqxComboBox.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} onChange={this.onChange} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
 
  private onChange(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the popup ListBox is opened.

Code examples

Bind to the open event of jqxComboBox.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} onOpen={this.onOpen} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
 
  private onOpen(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the user selects an item.

Code examples

Bind to the select event of jqxComboBox.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} onSelect={this.onSelect} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
 
  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 jqxComboBox.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
  
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} onUnselect={this.onUnselect} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
 
  private onUnselect(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Adds a new item to the jqxComboBox. 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 JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myComboBox.current!.addItem('item');
  }
   
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Clears all selected items.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myComboBox.current!.clearSelection();
  }
   
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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 JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myComboBox.current!.clear();
  }
   
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Hides the popup listbox.

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.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myComboBox.current!.checkIndex(0);
  }
   
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Checks an item.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myComboBox.current!.checkItem('Affogato');
  }
   
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myComboBox.current!.checkAll();
  }
   
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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 JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myComboBox.current!.destroy();
  }
   
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
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.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myComboBox.current!.disableItem('Affogato');
  }
   
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Disables an item by index. Index is a number.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myComboBox.current!.disableAt(0);
  }
   
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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. When necessary, the jqxComboBox scrolls to the item to make it visible.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myComboBox.current!.ensureVisible(9);
  }
   
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets the focus to the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myComboBox.current!.focus();
  }
   
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets 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 JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myComboBox.current!.getItem(0);
  }
   
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
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 JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myComboBox.current!.getItemByValue('Cappuccino');
  }
   
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets all items displayed in the ComboBox. The method could be useful for getting the currently visible items after auto complete. 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 JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myComboBox.current!.getVisibleItems();
  }
   
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
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 JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myComboBox.current!.getItems();
  }
   
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the checked 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.

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 JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myComboBox.current!.getSelectedItem();
  }
   
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the selected items when "multiselect" is turned on. The returned value is an Array with objects.

• 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.

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 JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myComboBox.current!.getSelectedIndex();
  }
   
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Inserts a new item to the jqxComboBox. 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 JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myComboBox.current!.insertAt('Item1',0);
  }
   
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Returns true, if the popup is opened. Otherwise returns false.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myComboBox.current!.isOpened();
  }
   
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
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.

Indeterminates an item.

Loads list items from a 'select' tag.

Shows the popup listbox.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myComboBox.current!.open();
  }
   
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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 JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myComboBox.current!.removeItem('Cappuccino');
  }
   
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
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 JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myComboBox.current!.removeAt(4);
  }
   
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Selects an item by index. The index is zero-based, i.e to select the first item, the 'selectIndex' 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 JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myComboBox.current!.selectIndex(0);
  }
   
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Selects an item.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myComboBox.current!.selectItem('Affogato');
  }
   
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Method: searchString

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myComboBox.current!.searchString();
  }
   
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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 JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myComboBox.current!.updateItem('New Item','Cappuccino');
  }
   
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
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 JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myComboBox.current!.updateAt('Item1',0);
  }
   
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Unselects item by index. The index is zero-based, i.e to unselect the first item, the 'unselectIndex' 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 JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myComboBox.current!.unselectIndex(4);
  }
   
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Unselects an item.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myComboBox.current!.unselectItem('Cappuccino');
  }
   
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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 JqxComboBox, { IComboBoxProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxcombobox';
 
class App extends React.PureComponent<{}, IComboBoxProps> {
  private myComboBox = React.createRef<JqxComboBox>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        source: [
          'Affogato',
          'Americano',
          'Bicerin',
          'Breve',
          'Cappuccino',
          'Espresso',
          'Frappuccino',
          'Iced Coffee',
          'Irish coffee',
          'Liqueur coffee'
        ]
    }
  }
 
  public componentDidMount(): void {
    this.myComboBox.current!.val();
  }
   
  public render() {
    return (
      <JqxComboBox ref={this.myComboBox} 
        width={200} height={25} source={this.state.source} selectedIndex={4}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);