Properties

NameTypeDefault
disabled Boolean false

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButtonGroup from 'jqwidgets-react/react_jqxbuttongroup.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxButtonGroup ref='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.getElementById('app'));
enableHover Boolean false

Sets or gets the enableHover property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButtonGroup from 'jqwidgets-react/react_jqxbuttongroup.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxButtonGroup ref='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.getElementById('app'));
mode String 'default'

Sets or gets the mode property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButtonGroup from 'jqwidgets-react/react_jqxbuttongroup.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxButtonGroup ref='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.getElementById('app'));
rtl Boolean false

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButtonGroup from 'jqwidgets-react/react_jqxbuttongroup.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxButtonGroup ref='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.getElementById('app'));
template String 'default'

Sets or gets the template property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButtonGroup from 'jqwidgets-react/react_jqxbuttongroup.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxButtonGroup ref='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.getElementById('app'));
theme String ''

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButtonGroup from 'jqwidgets-react/react_jqxbuttongroup.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxButtonGroup ref='myButtonGroup' theme={'energyblue'}>
                <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.getElementById('app'));

Events

buttonclick Event

This event is triggered when a button is clicked.

Code examples

Bind to the buttonclick event of jqxButtonGroup. 

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButtonGroup from 'jqwidgets-react/react_jqxbuttongroup.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myButtonGroup.on('buttonclick', (event) => {
            // Do Something...
        });
    }

    render() {             
        return (
            <JqxButtonGroup ref='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.getElementById('app'));

selected Event

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

Code examples

Bind to the selected event of jqxButtonGroup. 

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButtonGroup from 'jqwidgets-react/react_jqxbuttongroup.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myButtonGroup.on('selected', (event) => {
            // Do Something...
        });
    }

    render() {             
        return (
            <JqxButtonGroup ref='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.getElementById('app'));

unselected Event

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

Code examples

Bind to the unselected event of jqxButtonGroup. 

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButtonGroup from 'jqwidgets-react/react_jqxbuttongroup.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myButtonGroup.on('unselected', (event) => {
            // Do Something...
        });
    }

    render() {             
        return (
            <JqxButtonGroup ref='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.getElementById('app'));

Methods

NameReturn Type
disableAt None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButtonGroup from 'jqwidgets-react/react_jqxbuttongroup.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myButtonGroup.disableAt(1);
    }

    render() {             
        return (
            <JqxButtonGroup ref='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.getElementById('app'));

disable None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButtonGroup from 'jqwidgets-react/react_jqxbuttongroup.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myButtonGroup.disable();
    }

    render() {             
        return (
            <JqxButtonGroup ref='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.getElementById('app'));

destroy None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButtonGroup from 'jqwidgets-react/react_jqxbuttongroup.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myButtonGroup.destroy();
    }

    render() {             
        return (
            <JqxButtonGroup ref='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.getElementById('app'));

enable None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButtonGroup from 'jqwidgets-react/react_jqxbuttongroup.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myButtonGroup.enable();
    }

    render() {             
        return (
            <JqxButtonGroup ref='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.getElementById('app'));

enableAt None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButtonGroup from 'jqwidgets-react/react_jqxbuttongroup.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myButtonGroup.enableAt(1);
    }

    render() {             
        return (
            <JqxButtonGroup ref='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.getElementById('app'));

focus None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButtonGroup from 'jqwidgets-react/react_jqxbuttongroup.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myButtonGroup.focus();
    }

    render() {             
        return (
            <JqxButtonGroup ref='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.getElementById('app'));

getSelection Number/Array 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButtonGroup from 'jqwidgets-react/react_jqxbuttongroup.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myButtonGroup.getSelection();
    }

    render() {             
        return (
            <JqxButtonGroup ref='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.getElementById('app'));

render None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButtonGroup from 'jqwidgets-react/react_jqxbuttongroup.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myButtonGroup.render();
    }

    render() {             
        return (
            <JqxButtonGroup ref='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.getElementById('app'));

setSelection None 
import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxButtonGroup from 'jqwidgets-react/react_jqxbuttongroup.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myButtonGroup.setSelection(1);
    }

    render() {             
        return (
            <JqxButtonGroup ref='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.getElementById('app'));