React UI Components Documentation

Enables or disables the jqxToolBar and all its tools.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxToolBar, { IToolBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtoolbar';
 
class App extends React.PureComponent<{}, IToolBarProps> {
  private myToolBar = React.createRef<JqxToolBar>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        tools: 'button | dropdownlist combobox | input',
        initTools: function (type, index, tool, menuToolIninitialization) {
          switch (index) {
            case 0:
              tool.text('Button');
              break;
            case 1:
              tool.jqxDropDownList({
                width: 130,
                source: ['Affogato', 'Breve', 'Cafe', 'Crema'],
                selectedIndex: 1
              });
              break;
            case 2:
              tool.jqxComboBox({
                width: 50,
                source: [8, 9, 10, 11, 12, 14, 16, 18, 20],
                selectedIndex: 3
              });
              break;
            case 3:
              tool.jqxInput({
                width: 200,
                placeHolder: 'Type here...'
              });
              break;
          }
        }
    }
  }
  
  public render() {
    return (
      <JqxToolBar ref={this.myToolBar} 
        width={'70%'} height={35} tools={this.state.tools} initTools={this.state.initTools}
        disabled={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxToolBar's height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxToolBar, { IToolBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtoolbar';
 
class App extends React.PureComponent<{}, IToolBarProps> {
  private myToolBar = React.createRef<JqxToolBar>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        tools: 'button | dropdownlist combobox | input',
        initTools: function (type, index, tool, menuToolIninitialization) {
          switch (index) {
            case 0:
              tool.text('Button');
              break;
            case 1:
              tool.jqxDropDownList({
                width: 130,
                source: ['Affogato', 'Breve', 'Cafe', 'Crema'],
                selectedIndex: 1
              });
              break;
            case 2:
              tool.jqxComboBox({
                width: 50,
                source: [8, 9, 10, 11, 12, 14, 16, 18, 20],
                selectedIndex: 3
              });
              break;
            case 3:
              tool.jqxInput({
                width: 200,
                placeHolder: 'Type here...'
              });
              break;
          }
        }
    }
  }
  
  public render() {
    return (
      <JqxToolBar ref={this.myToolBar} 
        width={'70%'} height={35} tools={this.state.tools} initTools={this.state.initTools}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

A callback function where settings can be made to the tools specified in the tools property. The initTools callback function is called twice for each tool. On the first call, the settings are applied to the tool as it appears in the toolbar. On the second call, the settings are applied to the tool when it is minimized. This allows the tool to appear differently in both cases if different settings are applied.

If you wish to disable the minimization of a tool, return { minimizable: false } in initTools. If you wish the tool to be minimizable but not to appear in the minimize pop-up menu, return { menuTool: false }. In these cases, there will only be one call of initTools for this tool.

initTools is passed four parameters:

• type - the type of the tool, as specified in tools.
• index
• tool - a jQuery object representing the tool.
• menuToolIninitialization - a boolean value, specifying whether initTools is called for the toolbar tool (false) or the pop-up menu tool (true).

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxToolBar, { IToolBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtoolbar';
 
class App extends React.PureComponent<{}, IToolBarProps> {
  private myToolBar = React.createRef<JqxToolBar>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        tools: 'button | dropdownlist combobox | input',
        initTools: function (type, index, tool, menuToolIninitialization) {
          switch (index) {
            case 0:
              tool.text('Button');
              break;
            case 1:
              tool.jqxDropDownList({
                width: 130,
                source: ['Affogato', 'Breve', 'Cafe', 'Crema'],
                selectedIndex: 1
              });
              break;
            case 2:
              tool.jqxComboBox({
                width: 50,
                source: [8, 9, 10, 11, 12, 14, 16, 18, 20],
                selectedIndex: 3
              });
              break;
            case 3:
              tool.jqxInput({
                width: 200,
                placeHolder: 'Type here...'
              });
              break;
          }
        }
    }
  }
  
  public render() {
    return (
      <JqxToolBar ref={this.myToolBar} 
        width={'70%'} height={35} tools={this.state.tools} initTools={this.state.initTools}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the width of the minimize pop-up menu.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxToolBar, { IToolBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtoolbar';
 
class App extends React.PureComponent<{}, IToolBarProps> {
  private myToolBar = React.createRef<JqxToolBar>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        tools: 'button | dropdownlist combobox | input',
        initTools: function (type, index, tool, menuToolIninitialization) {
          switch (index) {
            case 0:
              tool.text('Button');
              break;
            case 1:
              tool.jqxDropDownList({
                width: 130,
                source: ['Affogato', 'Breve', 'Cafe', 'Crema'],
                selectedIndex: 1
              });
              break;
            case 2:
              tool.jqxComboBox({
                width: 50,
                source: [8, 9, 10, 11, 12, 14, 16, 18, 20],
                selectedIndex: 3
              });
              break;
            case 3:
              tool.jqxInput({
                width: 200,
                placeHolder: 'Type here...'
              });
              break;
          }
        }
    }
  }
  
  public render() {
    return (
      <JqxToolBar ref={this.myToolBar} 
        width={'70%'} height={35} tools={this.state.tools} initTools={this.state.initTools}
        minimizeWidth={400}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the minimum width of the jqxToolBar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxToolBar, { IToolBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtoolbar';
 
class App extends React.PureComponent<{}, IToolBarProps> {
  private myToolBar = React.createRef<JqxToolBar>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        tools: 'button | dropdownlist combobox | input',
        initTools: function (type, index, tool, menuToolIninitialization) {
          switch (index) {
            case 0:
              tool.text('Button');
              break;
            case 1:
              tool.jqxDropDownList({
                width: 130,
                source: ['Affogato', 'Breve', 'Cafe', 'Crema'],
                selectedIndex: 1
              });
              break;
            case 2:
              tool.jqxComboBox({
                width: 50,
                source: [8, 9, 10, 11, 12, 14, 16, 18, 20],
                selectedIndex: 3
              });
              break;
            case 3:
              tool.jqxInput({
                width: 200,
                placeHolder: 'Type here...'
              });
              break;
          }
        }
    }
  }
  
  public render() {
    return (
      <JqxToolBar ref={this.myToolBar} 
        width={'70%'} height={35} tools={this.state.tools} initTools={this.state.initTools}
        minWidth={300}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the maximum width of the jqxToolBar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxToolBar, { IToolBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtoolbar';
 
class App extends React.PureComponent<{}, IToolBarProps> {
  private myToolBar = React.createRef<JqxToolBar>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        tools: 'button | dropdownlist combobox | input',
        initTools: function (type, index, tool, menuToolIninitialization) {
          switch (index) {
            case 0:
              tool.text('Button');
              break;
            case 1:
              tool.jqxDropDownList({
                width: 130,
                source: ['Affogato', 'Breve', 'Cafe', 'Crema'],
                selectedIndex: 1
              });
              break;
            case 2:
              tool.jqxComboBox({
                width: 50,
                source: [8, 9, 10, 11, 12, 14, 16, 18, 20],
                selectedIndex: 3
              });
              break;
            case 3:
              tool.jqxInput({
                width: 200,
                placeHolder: 'Type here...'
              });
              break;
          }
        }
    }
  }
  
  public render() {
    return (
      <JqxToolBar ref={this.myToolBar} 
        width={'70%'} height={35} tools={this.state.tools} initTools={this.state.initTools}
        maxWidth={900}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxToolBar, { IToolBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtoolbar';
 
class App extends React.PureComponent<{}, IToolBarProps> {
  private myToolBar = React.createRef<JqxToolBar>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        tools: 'button | dropdownlist combobox | input',
        initTools: function (type, index, tool, menuToolIninitialization) {
          switch (index) {
            case 0:
              tool.text('Button');
              break;
            case 1:
              tool.jqxDropDownList({
                width: 130,
                source: ['Affogato', 'Breve', 'Cafe', 'Crema'],
                selectedIndex: 1
              });
              break;
            case 2:
              tool.jqxComboBox({
                width: 50,
                source: [8, 9, 10, 11, 12, 14, 16, 18, 20],
                selectedIndex: 3
              });
              break;
            case 3:
              tool.jqxInput({
                width: 200,
                placeHolder: 'Type here...'
              });
              break;
          }
        }
    }
  }
  
  public render() {
    return (
      <JqxToolBar ref={this.myToolBar} 
        width={'70%'} height={35} tools={this.state.tools} initTools={this.state.initTools}
        rtl={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the types of tools in the jqxToolBar in the order they appear. The value of tools is a string representing a list of space-separated tool types. Possible tool types are: 'button', 'toggleButton', 'dropdownlist', 'combobox', 'input' and 'custom'. Separators can be added between tools by inserting a '|'.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxToolBar, { IToolBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtoolbar';
 
class App extends React.PureComponent<{}, IToolBarProps> {
  private myToolBar = React.createRef<JqxToolBar>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        tools: 'button | dropdownlist combobox | input',
        initTools: function (type, index, tool, menuToolIninitialization) {
          switch (index) {
            case 0:
              tool.text('Button');
              break;
            case 1:
              tool.jqxDropDownList({
                width: 130,
                source: ['Affogato', 'Breve', 'Cafe', 'Crema'],
                selectedIndex: 1
              });
              break;
            case 2:
              tool.jqxComboBox({
                width: 50,
                source: [8, 9, 10, 11, 12, 14, 16, 18, 20],
                selectedIndex: 3
              });
              break;
            case 3:
              tool.jqxInput({
                width: 200,
                placeHolder: 'Type here...'
              });
              break;
          }
        }
    }
  }
  
  public render() {
    return (
      <JqxToolBar ref={this.myToolBar} 
        width={'70%'} height={35} tools={this.state.tools} initTools={this.state.initTools}
      />
    );
  }
}
 
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 JqxToolBar, { IToolBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtoolbar';
 
class App extends React.PureComponent<{}, IToolBarProps> {
  private myToolBar = React.createRef<JqxToolBar>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        tools: 'button | dropdownlist combobox | input',
        initTools: function (type, index, tool, menuToolIninitialization) {
          switch (index) {
            case 0:
              tool.text('Button');
              break;
            case 1:
              tool.jqxDropDownList({
                width: 130,
                source: ['Affogato', 'Breve', 'Cafe', 'Crema'],
                selectedIndex: 1
              });
              break;
            case 2:
              tool.jqxComboBox({
                width: 50,
                source: [8, 9, 10, 11, 12, 14, 16, 18, 20],
                selectedIndex: 3
              });
              break;
            case 3:
              tool.jqxInput({
                width: 200,
                placeHolder: 'Type here...'
              });
              break;
          }
        }
    }
  }
  
  public render() {
    return (
      <JqxToolBar ref={this.myToolBar} 
        width={'70%'} height={35} tools={this.state.tools} initTools={this.state.initTools}
        theme={'material'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxToolBar's width.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxToolBar, { IToolBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtoolbar';
 
class App extends React.PureComponent<{}, IToolBarProps> {
  private myToolBar = React.createRef<JqxToolBar>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        tools: 'button | dropdownlist combobox | input',
        initTools: function (type, index, tool, menuToolIninitialization) {
          switch (index) {
            case 0:
              tool.text('Button');
              break;
            case 1:
              tool.jqxDropDownList({
                width: 130,
                source: ['Affogato', 'Breve', 'Cafe', 'Crema'],
                selectedIndex: 1
              });
              break;
            case 2:
              tool.jqxComboBox({
                width: 50,
                source: [8, 9, 10, 11, 12, 14, 16, 18, 20],
                selectedIndex: 3
              });
              break;
            case 3:
              tool.jqxInput({
                width: 200,
                placeHolder: 'Type here...'
              });
              break;
          }
        }
    }
  }
  
  public render() {
    return (
      <JqxToolBar ref={this.myToolBar} 
        width={'70%'} height={35} tools={this.state.tools} initTools={this.state.initTools}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the minimize pop-up menu is closed.

Code examples

Bind to the close event of jqxToolBar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxToolBar, { IToolBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtoolbar';
 
class App extends React.PureComponent<{}, IToolBarProps> {
  private myToolBar = React.createRef<JqxToolBar>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        tools: 'button | dropdownlist combobox | input',
        initTools: function (type, index, tool, menuToolIninitialization) {
          switch (index) {
            case 0:
              tool.text('Button');
              break;
            case 1:
              tool.jqxDropDownList({
                width: 130,
                source: ['Affogato', 'Breve', 'Cafe', 'Crema'],
                selectedIndex: 1
              });
              break;
            case 2:
              tool.jqxComboBox({
                width: 50,
                source: [8, 9, 10, 11, 12, 14, 16, 18, 20],
                selectedIndex: 3
              });
              break;
            case 3:
              tool.jqxInput({
                width: 200,
                placeHolder: 'Type here...'
              });
              break;
          }
        }
    }
  }
 
  public componentDidMount(): void {
    this.myToolBar.current!.setOptions({ width: '30%' });
  }
   
  public render() {
    return (
      <JqxToolBar ref={this.myToolBar} onClose={this.onClose} 
        width={'70%'} height={35} tools={this.state.tools} initTools={this.state.initTools}
      />
    );
  }
 
  private onClose(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the minimize pop-up menu is opened.

Code examples

Bind to the open event of jqxToolBar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxToolBar, { IToolBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtoolbar';
 
class App extends React.PureComponent<{}, IToolBarProps> {
  private myToolBar = React.createRef<JqxToolBar>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        tools: 'button | dropdownlist combobox | input',
        initTools: function (type, index, tool, menuToolIninitialization) {
          switch (index) {
            case 0:
              tool.text('Button');
              break;
            case 1:
              tool.jqxDropDownList({
                width: 130,
                source: ['Affogato', 'Breve', 'Cafe', 'Crema'],
                selectedIndex: 1
              });
              break;
            case 2:
              tool.jqxComboBox({
                width: 50,
                source: [8, 9, 10, 11, 12, 14, 16, 18, 20],
                selectedIndex: 3
              });
              break;
            case 3:
              tool.jqxInput({
                width: 200,
                placeHolder: 'Type here...'
              });
              break;
          }
        }
    }
  }
 
  public componentDidMount(): void {
    this.myToolBar.current!.setOptions({ width: '30%' });
  }
   
  public render() {
    return (
      <JqxToolBar ref={this.myToolBar} onOpen={this.onOpen} 
        width={'70%'} height={35} tools={this.state.tools} initTools={this.state.initTools}
      />
    );
  }
 
  private onOpen(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Adds a tool to the jqxToolBar.

List of parameters:

• Type - the new tool's type. Possible values are: 'button', 'toggleButton', 'dropdownlist', 'combobox', 'input' and 'custom'.
• Position - where to insert the tool. Possible values are 'first' and 'last'.
• Separator - whether to include a separator after the new tool. Possible values are true and false.
• Initialization callback function - a function to be called after the new tool has been initialized. It is passed three parameters:
  • type - the type of the tool.
  • tool - a jQuery object representing the tool.
  • menuToolIninitialization - a boolean value, specifying whether the callback is called for the toolbar tool (false) or the pop-up menu tool (true).

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxToolBar, { IToolBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtoolbar';
 
class App extends React.PureComponent<{}, IToolBarProps> {
  private myToolBar = React.createRef<JqxToolBar>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        tools: 'button | dropdownlist combobox | input',
        initTools: function (type, index, tool, menuToolIninitialization) {
          switch (index) {
            case 0:
              tool.text('Button');
              break;
            case 1:
              tool.jqxDropDownList({
                width: 130,
                source: ['Affogato', 'Breve', 'Cafe', 'Crema'],
                selectedIndex: 1
              });
              break;
            case 2:
              tool.jqxComboBox({
                width: 50,
                source: [8, 9, 10, 11, 12, 14, 16, 18, 20],
                selectedIndex: 3
              });
              break;
            case 3:
              tool.jqxInput({
                width: 200,
                placeHolder: 'Type here...'
              });
              break;
          }
        }
    }
  }
 
  public componentDidMount(): void {
    this.myToolBar.current!.addTool('button','last','',function (type, tool, menuToolIninitialization) {
        tool.text("New button");
        tool.jqxButton({
          width: 170
        });
      });
  }
   
  public render() {
    return (
      <JqxToolBar ref={this.myToolBar} 
        width={'70%'} height={35} tools={this.state.tools} initTools={this.state.initTools}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Disables a tool.

List of parameters:

• Index - the tool's index.
• Disable - whether to disable or enable the tool. Possible values are true (disables the tool) and false (enables the tool).

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxToolBar, { IToolBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtoolbar';
 
class App extends React.PureComponent<{}, IToolBarProps> {
  private myToolBar = React.createRef<JqxToolBar>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        tools: 'button | dropdownlist combobox | input',
        initTools: function (type, index, tool, menuToolIninitialization) {
          switch (index) {
            case 0:
              tool.text('Button');
              break;
            case 1:
              tool.jqxDropDownList({
                width: 130,
                source: ['Affogato', 'Breve', 'Cafe', 'Crema'],
                selectedIndex: 1
              });
              break;
            case 2:
              tool.jqxComboBox({
                width: 50,
                source: [8, 9, 10, 11, 12, 14, 16, 18, 20],
                selectedIndex: 3
              });
              break;
            case 3:
              tool.jqxInput({
                width: 200,
                placeHolder: 'Type here...'
              });
              break;
          }
        }
    }
  }
 
  public componentDidMount(): void {
    this.myToolBar.current!.disableTool(1,true);
  }
   
  public render() {
    return (
      <JqxToolBar ref={this.myToolBar} 
        width={'70%'} height={35} tools={this.state.tools} initTools={this.state.initTools}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Destroys the toolbar and all its tools.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxToolBar, { IToolBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtoolbar';
 
class App extends React.PureComponent<{}, IToolBarProps> {
  private myToolBar = React.createRef<JqxToolBar>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        tools: 'button | dropdownlist combobox | input',
        initTools: function (type, index, tool, menuToolIninitialization) {
          switch (index) {
            case 0:
              tool.text('Button');
              break;
            case 1:
              tool.jqxDropDownList({
                width: 130,
                source: ['Affogato', 'Breve', 'Cafe', 'Crema'],
                selectedIndex: 1
              });
              break;
            case 2:
              tool.jqxComboBox({
                width: 50,
                source: [8, 9, 10, 11, 12, 14, 16, 18, 20],
                selectedIndex: 3
              });
              break;
            case 3:
              tool.jqxInput({
                width: 200,
                placeHolder: 'Type here...'
              });
              break;
          }
        }
    }
  }
 
  public componentDidMount(): void {
    this.myToolBar.current!.destroy();
  }
   
  public render() {
    return (
      <JqxToolBar ref={this.myToolBar} 
        width={'70%'} height={35} tools={this.state.tools} initTools={this.state.initTools}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Destroys a tool.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxToolBar, { IToolBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtoolbar';
 
class App extends React.PureComponent<{}, IToolBarProps> {
  private myToolBar = React.createRef<JqxToolBar>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        tools: 'button | dropdownlist combobox | input',
        initTools: function (type, index, tool, menuToolIninitialization) {
          switch (index) {
            case 0:
              tool.text('Button');
              break;
            case 1:
              tool.jqxDropDownList({
                width: 130,
                source: ['Affogato', 'Breve', 'Cafe', 'Crema'],
                selectedIndex: 1
              });
              break;
            case 2:
              tool.jqxComboBox({
                width: 50,
                source: [8, 9, 10, 11, 12, 14, 16, 18, 20],
                selectedIndex: 3
              });
              break;
            case 3:
              tool.jqxInput({
                width: 200,
                placeHolder: 'Type here...'
              });
              break;
          }
        }
    }
  }
 
  public componentDidMount(): void {
    this.myToolBar.current!.destroyTool(1);
  }
   
  public render() {
    return (
      <JqxToolBar ref={this.myToolBar} 
        width={'70%'} height={35} tools={this.state.tools} initTools={this.state.initTools}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Returns an array of all tools in the jqxToolBar.

Each tool is represented by an object with the following fields:

• type - string. Returns the type of the tool.
• tool - object. Returns a jQuery object representing the tool.
• separatorAfterWidget - boolean. Returns whether there is a separator after the tool.
• minimizable - boolean. Returns whether the tool is minimizable.
• minimized - boolean. Returns whether the tool is currently minimized.
• menuTool - object. Returns a jQuery object representing the minimized tool in the pop-up menu. If the minimized tool is disabled, returns false.
• menuSeparator - object. Returns a jQuery object representing the separator after the minimized tool in the pop-up menu. If there is no separator after the tool, returns false.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxToolBar, { IToolBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtoolbar';
 
class App extends React.PureComponent<{}, IToolBarProps> {
  private myToolBar = React.createRef<JqxToolBar>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        tools: 'button | dropdownlist combobox | input',
        initTools: function (type, index, tool, menuToolIninitialization) {
          switch (index) {
            case 0:
              tool.text('Button');
              break;
            case 1:
              tool.jqxDropDownList({
                width: 130,
                source: ['Affogato', 'Breve', 'Cafe', 'Crema'],
                selectedIndex: 1
              });
              break;
            case 2:
              tool.jqxComboBox({
                width: 50,
                source: [8, 9, 10, 11, 12, 14, 16, 18, 20],
                selectedIndex: 3
              });
              break;
            case 3:
              tool.jqxInput({
                width: 200,
                placeHolder: 'Type here...'
              });
              break;
          }
        }
    }
  }
 
  public componentDidMount(): void {
    this.myToolBar.current!.getTools();
  }
   
  public render() {
    return (
      <JqxToolBar ref={this.myToolBar} 
        width={'70%'} height={35} tools={this.state.tools} initTools={this.state.initTools}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Renders the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxToolBar, { IToolBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtoolbar';
 
class App extends React.PureComponent<{}, IToolBarProps> {
  private myToolBar = React.createRef<JqxToolBar>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        tools: 'button | dropdownlist combobox | input',
        initTools: function (type, index, tool, menuToolIninitialization) {
          switch (index) {
            case 0:
              tool.text('Button');
              break;
            case 1:
              tool.jqxDropDownList({
                width: 130,
                source: ['Affogato', 'Breve', 'Cafe', 'Crema'],
                selectedIndex: 1
              });
              break;
            case 2:
              tool.jqxComboBox({
                width: 50,
                source: [8, 9, 10, 11, 12, 14, 16, 18, 20],
                selectedIndex: 3
              });
              break;
            case 3:
              tool.jqxInput({
                width: 200,
                placeHolder: 'Type here...'
              });
              break;
          }
        }
    }
  }
 
  public componentDidMount(): void {
    this.myToolBar.current!.render();
  }
   
  public render() {
    return (
      <JqxToolBar ref={this.myToolBar} 
        width={'70%'} height={35} tools={this.state.tools} initTools={this.state.initTools}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Refreshes the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxToolBar, { IToolBarProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxtoolbar';
 
class App extends React.PureComponent<{}, IToolBarProps> {
  private myToolBar = React.createRef<JqxToolBar>(); 
 
  constructor(props: {}) {
    super(props);
    
    this.state = {
        tools: 'button | dropdownlist combobox | input',
        initTools: function (type, index, tool, menuToolIninitialization) {
          switch (index) {
            case 0:
              tool.text('Button');
              break;
            case 1:
              tool.jqxDropDownList({
                width: 130,
                source: ['Affogato', 'Breve', 'Cafe', 'Crema'],
                selectedIndex: 1
              });
              break;
            case 2:
              tool.jqxComboBox({
                width: 50,
                source: [8, 9, 10, 11, 12, 14, 16, 18, 20],
                selectedIndex: 3
              });
              break;
            case 3:
              tool.jqxInput({
                width: 200,
                placeHolder: 'Type here...'
              });
              break;
          }
        }
    }
  }
 
  public componentDidMount(): void {
    this.myToolBar.current!.refresh();
  }
   
  public render() {
    return (
      <JqxToolBar ref={this.myToolBar} 
        width={'70%'} height={35} tools={this.state.tools} initTools={this.state.initTools}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);