Properties

NameTypeDefault
autoOpen boolean false

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

Sets or gets whether the height of the jqxDropDownList'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 JqxDropDownList, { IDropDownListProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownlist';
class App extends React.PureComponent<{}, IDropDownListProps> {
private myDropDownList = React.createRef<JqxDropDownList>();
constructor(props: {}) {
super(props);
this.state = {
source: [
'Affogato',
'Americano',
'Bicerin',
'Breve',
'Cappuccino',
'Espresso',
'Frappuccino',
'Iced Coffee?',
'Irish coffee',
'Liqueur coffee'
]
}
}
public render() {
return (
<JqxDropDownList ref={this.myDropDownList}
width={200} height={25} source={this.state.source} selectedIndex={4} autoDropDownHeight={true}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
animationType DropDownListAnimationType 'slide'
DropDownListAnimationType: "none" | "slide" | "fade"

Sets or gets the type of the animation.

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

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

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

Enables/disables the jqxDropDownList.

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

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

dropDownHorizontalAlignment DropDownListHorizontalAlignment 'left'
DropDownListHorizontalAlignment: "left" | "right"

Sets or gets the DropDown's alignment.

Possible Values:
'left'
'right'
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDropDownList, { IDropDownListProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownlist';
class App extends React.PureComponent<{}, IDropDownListProps> {
private myDropDownList = React.createRef<JqxDropDownList>();
constructor(props: {}) {
super(props);
this.state = {
source: [
'Affogato',
'Americano',
'Bicerin',
'Breve',
'Cappuccino',
'Espresso',
'Frappuccino',
'Iced Coffee?',
'Irish coffee',
'Liqueur coffee'
]
}
}
public render() {
return (
<JqxDropDownList ref={this.myDropDownList}
width={200} height={25} source={this.state.source} selectedIndex={4} dropDownHorizontalAlignment={'right'}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
dropDownVerticalAlignment DropDownListVerticalAlignment 'bottom'
DropDownListVerticalAlignment: "bottom" | "top"

Sets or gets the DropDown's alignment.

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

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

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

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

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

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

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

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

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 JqxDropDownList, { IDropDownListProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownlist';
class App extends React.PureComponent<{}, IDropDownListProps> {
private myDropDownList = React.createRef<JqxDropDownList>();
constructor(props: {}) {
super(props);
this.state = {
source: [
'Affogato',
'Americano',
'Bicerin',
'Breve',
'Cappuccino',
'Espresso',
'Frappuccino',
'Iced Coffee?',
'Irish coffee',
'Liqueur coffee'
]
}
}
public render() {
return (
<JqxDropDownList ref={this.myDropDownList}
width={200} height={25} source={this.state.source} selectedIndex={4} filterDelay={200}
filterable={true}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
filterPlaceHolder string "Looking for"

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

Sets or gets the jqxDropDownList's height.

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

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, jqxDropDownList automatically selects the found item. Focus the widget and start typing.

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

Sets or 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. Focus the widget and start typing.

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

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

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

Text displayed when the selection is empty.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDropDownList, { IDropDownListProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownlist';
class App extends React.PureComponent<{}, IDropDownListProps> {
private myDropDownList = React.createRef<JqxDropDownList>();
constructor(props: {}) {
super(props);
this.state = {
source: [
'Affogato',
'Americano',
'Bicerin',
'Breve',
'Cappuccino',
'Espresso',
'Frappuccino',
'Iced Coffee?',
'Irish coffee',
'Liqueur coffee'
]
}
}
public render() {
return (
<JqxDropDownList ref={this.myDropDownList}
width={200} height={25} source={this.state.source} selectedIndex={'null'}
placeHolder={'I am a placeholder !'}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
popupZIndex number 20000

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

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDropDownList, { IDropDownListProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownlist';
class App extends React.PureComponent<{}, IDropDownListProps> {
private myDropDownList = React.createRef<JqxDropDownList>();
constructor(props: {}) {
super(props);
this.state = {
source: [
'Affogato',
'Americano',
'Bicerin',
'Breve',
'Cappuccino',
'Espresso',
'Frappuccino',
'Iced Coffee?',
'Irish coffee',
'Liqueur coffee'
]
}
}
public render() {
return (
<JqxDropDownList ref={this.myDropDownList}
width={200} height={25} source={this.state.source} selectedIndex={4} rtl={true}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
renderer (index?: DropDownListRenderer['index'], label?: DropDownListRenderer['label'], value?: DropDownListRenderer['value']) => string null
Interface DropDownListRenderer {
  index?: number;
  label?: string;
  value?: string;
}

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 JqxDropDownList, { IDropDownListProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownlist';
class App extends React.PureComponent<{}, IDropDownListProps> {
private myDropDownList = React.createRef<JqxDropDownList>();
constructor(props: {}) {
super(props);
this.state = {
renderer: (index: number, label: string, value: string): any => {
return index + ' ' + label;
},
source: [
'Affogato',
'Americano',
'Bicerin',
'Breve',
'Cappuccino',
'Espresso',
'Frappuccino',
'Iced Coffee?',
'Irish coffee',
'Liqueur coffee'
]
}
}
public render() {
return (
<JqxDropDownList ref={this.myDropDownList}
width={200} height={25} source={this.state.source} selectedIndex={4} renderer={this.state.renderer}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
selectionRenderer (element?: DropDownListSelectionRenderer['element'], index?: DropDownListSelectionRenderer['index'], label?: DropDownListSelectionRenderer['label'], value?: DropDownListSelectionRenderer['value']) => string null
Interface DropDownListSelectionRenderer {
  element?: object;
  index?: number;
  label?: string;
  value?: any;
}

Callback function which is called when the selected item is rendered in the jqxDropDownList's content area. By using the selectionRenderer function, you can customize the look of the selected item.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDropDownList, { IDropDownListProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownlist';
class App extends React.PureComponent<{}, IDropDownListProps> {
private myDropDownList = React.createRef<JqxDropDownList>();
constructor(props: {}) {
super(props);
this.state = {
selectionRenderer: (element: object, index: number, label: string, value: any): any => {
return 'My String';
},
source: [
'Affogato',
'Americano',
'Bicerin',
'Breve',
'Cappuccino',
'Espresso',
'Frappuccino',
'Iced Coffee?',
'Irish coffee',
'Liqueur coffee'
]
}
}
public render() {
return (
<JqxDropDownList ref={this.myDropDownList}
width={200} height={25} source={this.state.source} selectedIndex={4} selectionRenderer={this.state.selectionRenderer}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
searchMode DropDownListSearchMode startswith
DropDownListSearchMode: "none" | "contains" | "containsignorecase" | "equals" | "equalsignorecase" | "startswithignorecase" | "startswith" | "endswithignorecase" | "endswith"

Sets or gets the item incremental search mode. When the user types some text in a focused DropDownList, the jqxListBox widget tries to find the searched item using the entered text and the selected search mode.

Possible Values:
'none'
'contains'
'containsignorecase'
'equals'
'equalsignorecase'
'startswithignorecase'
'startswith'
'endswithignorecase'
'endswith'
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDropDownList, { IDropDownListProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownlist';
class App extends React.PureComponent<{}, IDropDownListProps> {
private myDropDownList = React.createRef<JqxDropDownList>();
constructor(props: {}) {
super(props);
this.state = {
source: [
'Affogato',
'Americano',
'Bicerin',
'Breve',
'Cappuccino',
'Espresso',
'Frappuccino',
'Iced Coffee?',
'Irish coffee',
'Liqueur coffee'
]
}
}
public render() {
return (
<JqxDropDownList ref={this.myDropDownList}
width={200} height={25} source={this.state.source} selectedIndex={4} searchMode={'startswith'}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
source Array<any> null

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

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

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

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

width number | string null

Sets or gets the jqxDropDownList's width.

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

Events

bindingComplete Event

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

Code examples

Bind to the bindingComplete event of jqxDropDownList.

close Event

This event is triggered when the popup ListBox is closed.

Code examples

Bind to the close event of jqxDropDownList.

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

checkChange Event

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

Code examples

Bind to the checkChange event of jqxDropDownList.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDropDownList, { IDropDownListProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownlist';
class App extends React.PureComponent<{}, IDropDownListProps> {
private myDropDownList = React.createRef<JqxDropDownList>();
constructor(props: {}) {
super(props);
this.state = {
source: [
'Affogato',
'Americano',
'Bicerin',
'Breve',
'Cappuccino',
'Espresso',
'Frappuccino',
'Iced Coffee?',
'Irish coffee',
'Liqueur coffee'
]
}
}
public componentDidMount(): void {
this.myDropDownList.current!.setOptions({ checkboxes: true });
}
public render() {
return (
<JqxDropDownList ref={this.myDropDownList} 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);

change Event

This event is triggered when the user selects an item.

Code examples

Bind to the change event of jqxDropDownList.

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

open Event

This event is triggered when the popup ListBox is opened.

Code examples

Bind to the open event of jqxDropDownList.

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

select Event

This event is triggered when the user selects an item.

Code examples

Bind to the select event of jqxDropDownList.

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

unselect Event

This event is triggered when the user unselects an item.

Code examples

Bind to the unselect event of jqxDropDownList.

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

Methods

NameArgumentsReturn Type
addItem item

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

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

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

Hides the popup listbox.

checkIndex index

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

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

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

Clears the widget's filter when filtering is applied.

destroy None

Destroys the widget.

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

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

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

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.
enableAt index

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

ensureVisible index

Ensures that an item is visible. index is number. When necessary, the jqxDropDownList scrolls to the item to make it visible.

focus None

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

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

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

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

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.
getSelectedItem None

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

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

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

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

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

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

Loads list items from a 'select' tag.

open None

Shows the popup listbox.

removeItem item

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

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

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

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

Sets the content of the DropDownList.

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

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

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

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

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

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.

uncheckItem item

Unchecks an item.

uncheckAll None

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

val value

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