If you have technical questions, please create a support ticket in the DevExpress Support Center.
import React from 'react';
import { ButtonGroup, ButtonGroupTypes } from 'devextreme-react/button-group';
import notify from 'devextreme/ui/notify';
import { alignments, fontStyles } from './data.ts';
const selectedItemKeys = ['left'];
const itemClick = (e: ButtonGroupTypes.ItemClickEvent) => {
notify({ message: `The "${e.itemData.hint}" button was clicked`, width: 320 }, 'success', 1000);
};
export default function App() {
return (
<div>
<div className="buttongroups-container">
<ButtonGroup
items={alignments}
keyExpr="alignment"
stylingMode="outlined"
defaultSelectedItemKeys={selectedItemKeys}
onItemClick={itemClick}
/>
<ButtonGroup
items={fontStyles}
keyExpr="style"
stylingMode="outlined"
selectionMode="multiple"
onItemClick={itemClick}
/>
</div>
<div className="buttongroups-container">
<ButtonGroup
items={alignments}
keyExpr="alignment"
stylingMode="text"
defaultSelectedItemKeys={selectedItemKeys}
onItemClick={itemClick}
/>
<ButtonGroup
className="multiple-selection-styling-mode"
items={fontStyles}
keyExpr="style"
stylingMode="text"
selectionMode="multiple"
onItemClick={itemClick}
/>
</div>
</div>
);
}
xxxxxxxxxx
import React from 'react';
import { ButtonGroup } from 'devextreme-react/button-group';
import notify from 'devextreme/ui/notify';
import { alignments, fontStyles } from './data.js';
const selectedItemKeys = ['left'];
const itemClick = (e) => {
notify({ message: `The "${e.itemData.hint}" button was clicked`, width: 320 }, 'success', 1000);
};
export default function App() {
return (
<div>
<div className="buttongroups-container">
<ButtonGroup
items={alignments}
keyExpr="alignment"
stylingMode="outlined"
defaultSelectedItemKeys={selectedItemKeys}
onItemClick={itemClick}
/>
<ButtonGroup
items={fontStyles}
keyExpr="style"
stylingMode="outlined"
selectionMode="multiple"
onItemClick={itemClick}
/>
</div>
<div className="buttongroups-container">
<ButtonGroup
items={alignments}
keyExpr="alignment"
stylingMode="text"
defaultSelectedItemKeys={selectedItemKeys}
onItemClick={itemClick}
/>
<ButtonGroup
className="multiple-selection-styling-mode"
items={fontStyles}
keyExpr="style"
stylingMode="text"
selectionMode="multiple"
onItemClick={itemClick}
/>
</div>
</div>
);
}
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
xxxxxxxxxx
export const alignments = [
{
icon: 'alignleft',
alignment: 'left',
hint: 'Align left',
},
{
icon: 'aligncenter',
alignment: 'center',
hint: 'Center',
},
{
icon: 'alignright',
alignment: 'right',
hint: 'Align right',
},
{
icon: 'alignjustify',
alignment: 'justify',
hint: 'Justify',
},
];
export const fontStyles = [
{
icon: 'bold',
style: 'bold',
hint: 'Bold',
},
{
icon: 'italic',
style: 'italic',
hint: 'Italic',
},
{
icon: 'underline',
style: 'underline',
hint: 'Underlined',
},
{
icon: 'strike',
style: 'strike',
hint: 'Strikethrough',
},
];
xxxxxxxxxx
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
jsx: 'react',
},
meta: {
'react': {
'esModule': true,
},
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
'openai': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
'bundles:': 'bundles/',
'externals:': 'bundles/externals/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'react': 'npm:react@17.0.2/umd/react.development.js',
'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',
'prop-types': 'npm:prop-types/prop-types.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs',
'devextreme-react': 'npm:devextreme-react@link:../../packages/devextreme-react/npm/cjs',
'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.54/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',
// SystemJS plugins
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: 'json',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.12/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
xxxxxxxxxx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
xxxxxxxxxx
export const alignments = [
{
icon: 'alignleft',
alignment: 'left',
hint: 'Align left',
},
{
icon: 'aligncenter',
alignment: 'center',
hint: 'Center',
},
{
icon: 'alignright',
alignment: 'right',
hint: 'Align right',
},
{
icon: 'alignjustify',
alignment: 'justify',
hint: 'Justify',
},
];
export const fontStyles = [
{
icon: 'bold',
style: 'bold',
hint: 'Bold',
},
{
icon: 'italic',
style: 'italic',
hint: 'Italic',
},
{
icon: 'underline',
style: 'underline',
hint: 'Underlined',
},
{
icon: 'strike',
style: 'strike',
hint: 'Strikethrough',
},
];
xxxxxxxxxx
<html lang="en">
<head></head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
xxxxxxxxxx
.buttongroups-container {
display: flex;
justify-content: center;
font-size: 16px;
}
.buttongroups-container > div {
padding: 0 12px;
}
.buttongroups-container:first-child {
margin-top: 120px;
margin-bottom: 40px;
}
.multiple-selection-styling-mode {
border-left-width: 1px;
border-left-style: solid;
border-color: #ddd;
}
Bind ButtonGroup to Data
Use the items array to populate ButtonGroup with data. You can specify the following fields in data objects:
Process Button Selection
Set the keyExpr property to the data field that supplies keys used to distinguish the selected buttons. In this demo, the selectedItemKeys property contains the keys of the selected buttons. This property allows you to predefine selected buttons. To enable multiple selection, set the selectionMode property to multiple
.
Use the onItemClick function to process clicks on buttons.
Customize the Buttongroup Appearance
Specify the stylingMode property and select one of the three predefined styles. In this demo, the button groups in the first row have the outlined
style, while others have the text
style. You can specify the buttonTemplate property to customize the apperance of each button.
To get started with the DevExtreme ButtonGroup component, refer to the following tutorial for step-by-step instructions: Getting Started with ButtonGroup.