React UI Components Documentation

Enables or disables the jqxButtonGroup.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButtonGroup, { IButtonGroupProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttongroup';
 
class App extends React.PureComponent<{}, IButtonGroupProps> {
  private myButtonGroup = React.createRef<JqxButtonGroup>();  
  
  public render() {
    return (
      <JqxButtonGroup ref={this.myButtonGroup} 
        disabled={true}>
        <button style='padding: 4px 16px' id='Left' value='Left'></button>
    <button style='padding: 4px 16px' id='Center' value='Center'></button>
    <button style='padding: 4px 16px' id='Right' value='Right'></button>
      </JqxButtonGroup>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables or disabled the highlight state.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButtonGroup, { IButtonGroupProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttongroup';
 
class App extends React.PureComponent<{}, IButtonGroupProps> {
  private myButtonGroup = React.createRef<JqxButtonGroup>();  
  
  public render() {
    return (
      <JqxButtonGroup ref={this.myButtonGroup} 
        enableHover={false}>
        <button style='padding: 4px 16px' id='Left' value='Left'></button>
    <button style='padding: 4px 16px' id='Center' value='Center'></button>
    <button style='padding: 4px 16px' id='Right' value='Right'></button>
      </JqxButtonGroup>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxButtonGroup's mode.

'checkbox'

'radio'

'default'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButtonGroup, { IButtonGroupProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttongroup';
 
class App extends React.PureComponent<{}, IButtonGroupProps> {
  private myButtonGroup = React.createRef<JqxButtonGroup>();  
  
  public render() {
    return (
      <JqxButtonGroup ref={this.myButtonGroup} 
        mode={'radio'}>
        <button style='padding: 4px 16px' id='Left' value='Left'></button>
    <button style='padding: 4px 16px' id='Center' value='Center'></button>
    <button style='padding: 4px 16px' id='Right' value='Right'></button>
      </JqxButtonGroup>
    );
  }
}
 
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 JqxButtonGroup, { IButtonGroupProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttongroup';
 
class App extends React.PureComponent<{}, IButtonGroupProps> {
  private myButtonGroup = React.createRef<JqxButtonGroup>();  
  
  public render() {
    return (
      <JqxButtonGroup ref={this.myButtonGroup} 
        rtl={true}>
        <button style='padding: 4px 16px' id='Left' value='Left'></button>
    <button style='padding: 4px 16px' id='Center' value='Center'></button>
    <button style='padding: 4px 16px' id='Right' value='Right'></button>
      </JqxButtonGroup>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines the template as an alternative of the default styles.

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

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

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

'warning' - orange style which indicates caution.

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

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

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButtonGroup, { IButtonGroupProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttongroup';
 
class App extends React.PureComponent<{}, IButtonGroupProps> {
  private myButtonGroup = React.createRef<JqxButtonGroup>();  
  
  public render() {
    return (
      <JqxButtonGroup ref={this.myButtonGroup} 
        template={'success'}>
        <button style='padding: 4px 16px' id='Left' value='Left'></button>
    <button style='padding: 4px 16px' id='Center' value='Center'></button>
    <button style='padding: 4px 16px' id='Right' value='Right'></button>
      </JqxButtonGroup>
    );
  }
}
 
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 JqxButtonGroup, { IButtonGroupProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttongroup';
 
class App extends React.PureComponent<{}, IButtonGroupProps> {
  private myButtonGroup = React.createRef<JqxButtonGroup>();  
  
  public render() {
    return (
      <JqxButtonGroup ref={this.myButtonGroup} 
        theme={'material'}>
        <button style='padding: 4px 16px' id='Left' value='Left'></button>
    <button style='padding: 4px 16px' id='Center' value='Center'></button>
    <button style='padding: 4px 16px' id='Right' value='Right'></button>
      </JqxButtonGroup>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when a button is clicked.

Code examples

Bind to the buttonclick event of jqxButtonGroup.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButtonGroup, { IButtonGroupProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttongroup';
 
class App extends React.PureComponent<{}, IButtonGroupProps> {
  private myButtonGroup = React.createRef<JqxButtonGroup>();  
  
  public render() {
    return (
      <JqxButtonGroup ref={this.myButtonGroup} onButtonclick={this.onButtonclick} 
       >
        <button style='padding: 4px 16px' id='Left' value='Left'></button>
    <button style='padding: 4px 16px' id='Center' value='Center'></button>
    <button style='padding: 4px 16px' id='Right' value='Right'></button>
      </JqxButtonGroup>
    );
  }
 
  private onButtonclick(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when a button is selected - in checkboxes or radio buttons mode.

Code examples

Bind to the selected event of jqxButtonGroup.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButtonGroup, { IButtonGroupProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttongroup';
 
class App extends React.PureComponent<{}, IButtonGroupProps> {
  private myButtonGroup = React.createRef<JqxButtonGroup>();  
  
  public render() {
    return (
      <JqxButtonGroup ref={this.myButtonGroup} onSelected={this.onSelected} 
       >
        <button style='padding: 4px 16px' id='Left' value='Left'></button>
    <button style='padding: 4px 16px' id='Center' value='Center'></button>
    <button style='padding: 4px 16px' id='Right' value='Right'></button>
      </JqxButtonGroup>
    );
  }
 
  private onSelected(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when a button is unselected - in checkbox or radio buttons mode.

Code examples

Bind to the unselected event of jqxButtonGroup.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButtonGroup, { IButtonGroupProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttongroup';
 
class App extends React.PureComponent<{}, IButtonGroupProps> {
  private myButtonGroup = React.createRef<JqxButtonGroup>();  
  
  public render() {
    return (
      <JqxButtonGroup ref={this.myButtonGroup} onUnselected={this.onUnselected} 
       >
        <button style='padding: 4px 16px' id='Left' value='Left'></button>
    <button style='padding: 4px 16px' id='Center' value='Center'></button>
    <button style='padding: 4px 16px' id='Right' value='Right'></button>
      </JqxButtonGroup>
    );
  }
 
  private onUnselected(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Disables a button at specific index.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButtonGroup, { IButtonGroupProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttongroup';
 
class App extends React.PureComponent<{}, IButtonGroupProps> {
  private myButtonGroup = React.createRef<JqxButtonGroup>();
 
  public componentDidMount(): void {
    this.myButtonGroup.current!.disableAt(1);
  }
   
  
  public render() {
    return (
      <JqxButtonGroup ref={this.myButtonGroup} 
       >
        <button style='padding: 4px 16px' id='Left' value='Left'></button>
    <button style='padding: 4px 16px' id='Center' value='Center'></button>
    <button style='padding: 4px 16px' id='Right' value='Right'></button>
      </JqxButtonGroup>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Disables jqxButtonGroup.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButtonGroup, { IButtonGroupProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttongroup';
 
class App extends React.PureComponent<{}, IButtonGroupProps> {
  private myButtonGroup = React.createRef<JqxButtonGroup>();
 
  public componentDidMount(): void {
    this.myButtonGroup.current!.disable();
  }
   
  
  public render() {
    return (
      <JqxButtonGroup ref={this.myButtonGroup} 
       >
        <button style='padding: 4px 16px' id='Left' value='Left'></button>
    <button style='padding: 4px 16px' id='Center' value='Center'></button>
    <button style='padding: 4px 16px' id='Right' value='Right'></button>
      </JqxButtonGroup>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Destroys the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButtonGroup, { IButtonGroupProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttongroup';
 
class App extends React.PureComponent<{}, IButtonGroupProps> {
  private myButtonGroup = React.createRef<JqxButtonGroup>();
 
  public componentDidMount(): void {
    this.myButtonGroup.current!.destroy();
  }
   
  
  public render() {
    return (
      <JqxButtonGroup ref={this.myButtonGroup} 
       >
        <button style='padding: 4px 16px' id='Left' value='Left'></button>
    <button style='padding: 4px 16px' id='Center' value='Center'></button>
    <button style='padding: 4px 16px' id='Right' value='Right'></button>
      </JqxButtonGroup>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables the jqxButtonGroup.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButtonGroup, { IButtonGroupProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttongroup';
 
class App extends React.PureComponent<{}, IButtonGroupProps> {
  private myButtonGroup = React.createRef<JqxButtonGroup>();
 
  public componentDidMount(): void {
    this.myButtonGroup.current!.enable();
  }
   
  
  public render() {
    return (
      <JqxButtonGroup ref={this.myButtonGroup} 
       >
        <button style='padding: 4px 16px' id='Left' value='Left'></button>
    <button style='padding: 4px 16px' id='Center' value='Center'></button>
    <button style='padding: 4px 16px' id='Right' value='Right'></button>
      </JqxButtonGroup>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables a button at specific index.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButtonGroup, { IButtonGroupProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttongroup';
 
class App extends React.PureComponent<{}, IButtonGroupProps> {
  private myButtonGroup = React.createRef<JqxButtonGroup>();
 
  public componentDidMount(): void {
    this.myButtonGroup.current!.enableAt(1);
  }
   
  
  public render() {
    return (
      <JqxButtonGroup ref={this.myButtonGroup} 
       >
        <button style='padding: 4px 16px' id='Left' value='Left'></button>
    <button style='padding: 4px 16px' id='Center' value='Center'></button>
    <button style='padding: 4px 16px' id='Right' value='Right'></button>
      </JqxButtonGroup>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets the index or indexes of the selected button(s).

• Returns undefined when the "mode" property is "default".
• Returns the index of the selected button when the "mode" property is set the "radio". For example, if the first button is selected, the retuned value is 0.
• Returns an array of the selected buttons when the "mode" property is set to "checkbox". For example, if you have a group of three buttons and the first and third buttons are selected, the returned value will be [0, 2]

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButtonGroup, { IButtonGroupProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttongroup';
 
class App extends React.PureComponent<{}, IButtonGroupProps> {
  private myButtonGroup = React.createRef<JqxButtonGroup>();
 
  public componentDidMount(): void {
    this.myButtonGroup.current!.getSelection();
  }
   
  
  public render() {
    return (
      <JqxButtonGroup ref={this.myButtonGroup} 
       >
        <button style='padding: 4px 16px' id='Left' value='Left'></button>
    <button style='padding: 4px 16px' id='Center' value='Center'></button>
    <button style='padding: 4px 16px' id='Right' value='Right'></button>
      </JqxButtonGroup>
    );
  }
}
 
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 JqxButtonGroup, { IButtonGroupProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttongroup';
 
class App extends React.PureComponent<{}, IButtonGroupProps> {
  private myButtonGroup = React.createRef<JqxButtonGroup>();
 
  public componentDidMount(): void {
    this.myButtonGroup.current!.render();
  }
   
  
  public render() {
    return (
      <JqxButtonGroup ref={this.myButtonGroup} 
       >
        <button style='padding: 4px 16px' id='Left' value='Left'></button>
    <button style='padding: 4px 16px' id='Center' value='Center'></button>
    <button style='padding: 4px 16px' id='Right' value='Right'></button>
      </JqxButtonGroup>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Selects a button in checkbox or radio buttons mode

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxButtonGroup, { IButtonGroupProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttongroup';
 
class App extends React.PureComponent<{}, IButtonGroupProps> {
  private myButtonGroup = React.createRef<JqxButtonGroup>();
 
  public componentDidMount(): void {
    this.myButtonGroup.current!.setSelection(1);
  }
   
  
  public render() {
    return (
      <JqxButtonGroup ref={this.myButtonGroup} 
       >
        <button style='padding: 4px 16px' id='Left' value='Left'></button>
    <button style='padding: 4px 16px' id='Center' value='Center'></button>
    <button style='padding: 4px 16px' id='Right' value='Right'></button>
      </JqxButtonGroup>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);