DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Selection

This demo processes tab selection and uses SelectBox and MultiView components to emulate page content. Both these components are bound to Tabs, and vice versa.

Backend API
import React, { useCallback, useState } from 'react'; import Tabs from 'devextreme-react/tabs'; import SelectBox from 'devextreme-react/select-box'; import MultiView from 'devextreme-react/multi-view'; import { employees, selectBoxLabel } from './data.ts'; class EmployeeInfo extends React.Component<{ data: { text: string, picture: string, position: string, notes: string } }> { render() { const { text, picture, position, notes, } = this.props.data; return ( <div className="employee-info"> <img alt={text} className="employee-photo" src={picture} /> <p className="employee-notes"> <b>Position: {position}</b><br /> {notes} </p> </div> ); } } const App = () => { const [selectedItem, setSelectedItem] = useState(employees[0]); const onSelectionChanged = useCallback((args) => { setSelectedItem(args.selectedItem || args.addedItems[0]); }, [setSelectedItem]); return ( <div id="center-content"> <div id="demo-items-container"> <div className="content dx-fieldset"> <div className="dx-field"> <Tabs dataSource={employees} onSelectionChanged={onSelectionChanged} selectedItem={selectedItem} /> </div> <div className="dx-field select-box-container"> <div className="dx-field-label">Selected user:</div> <div className="dx-field-value"> <SelectBox dataSource={employees} inputAttr={selectBoxLabel} value={selectedItem} onSelectionChanged={onSelectionChanged} displayExpr="text" /> </div> </div> <div className="dx-field multiview-container"> <MultiView height={112} dataSource={employees} selectedItem={selectedItem} onSelectionChanged={onSelectionChanged} loop={false} itemComponent={EmployeeInfo} animationEnabled={true} /> </div> <div className="icon-container"> <span className="dx-icon dx-icon-info"></span> <span className="demo-info">You can use swipe gestures in this area.</span> </div> </div> </div> </div> ); }; export default App;
import React, { useCallback, useState } from 'react'; import Tabs from 'devextreme-react/tabs'; import SelectBox from 'devextreme-react/select-box'; import MultiView from 'devextreme-react/multi-view'; import { employees, selectBoxLabel } from './data.js'; class EmployeeInfo extends React.Component { render() { const { text, picture, position, notes, } = this.props.data; return ( <div className="employee-info"> <img alt={text} className="employee-photo" src={picture} /> <p className="employee-notes"> <b>Position: {position}</b> <br /> {notes} </p> </div> ); } } const App = () => { const [selectedItem, setSelectedItem] = useState(employees[0]); const onSelectionChanged = useCallback( (args) => { setSelectedItem(args.selectedItem || args.addedItems[0]); }, [setSelectedItem], ); return ( <div id="center-content"> <div id="demo-items-container"> <div className="content dx-fieldset"> <div className="dx-field"> <Tabs dataSource={employees} onSelectionChanged={onSelectionChanged} selectedItem={selectedItem} /> </div> <div className="dx-field select-box-container"> <div className="dx-field-label">Selected user:</div> <div className="dx-field-value"> <SelectBox dataSource={employees} inputAttr={selectBoxLabel} value={selectedItem} onSelectionChanged={onSelectionChanged} displayExpr="text" /> </div> </div> <div className="dx-field multiview-container"> <MultiView height={112} dataSource={employees} selectedItem={selectedItem} onSelectionChanged={onSelectionChanged} loop={false} itemComponent={EmployeeInfo} animationEnabled={true} /> </div> <div className="icon-container"> <span className="dx-icon dx-icon-info"></span> <span className="demo-info">You can use swipe gestures in this area.</span> </div> </div> </div> </div> ); }; export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );
export const employees = [ { id: 0, icon: 'user', text: 'John Heart', position: 'CEO', picture: '../../../../images/employees/01.png', notes: 'John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003. When not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.', }, { id: 1, icon: 'user', text: 'Olivia Peyton', position: 'Sales Assistant', picture: '../../../../images/employees/09.png', notes: 'Olivia loves to sell. She has been selling DevAV products since 2012. Olivia was homecoming queen in high school. She is expecting her first child in 6 months. Good Luck Olivia.', }, { id: 2, icon: 'user', text: 'Robert Reagan', position: 'CMO', picture: '../../../../images/employees/03.png', notes: 'Robert was recently voted the CMO of the year by CMO Magazine. He is a proud member of the DevAV Management Team. Robert is a championship BBQ chef, so when you get the chance ask him for his secret recipe.', }, ]; export const selectBoxLabel = { 'aria-label': 'Select Employee' };
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, }, }, paths: { 'npm:': 'https://unpkg.com/', }, defaultExtension: 'js', map: { 'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js', 'typescript': 'npm:typescript@4.2.4/lib/typescript.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@15.8.1/prop-types.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@24.1.3/cjs', 'devextreme-react': 'npm:devextreme-react@24.1.3/cjs', 'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.8/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13', '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@7.4.11/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.13/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, react: true, }, }; System.config(window.config);
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));
export const employees = [ { id: 0, icon: 'user', text: 'John Heart', position: 'CEO', picture: '../../../../images/employees/01.png', notes: 'John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003. When not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.', }, { id: 1, icon: 'user', text: 'Olivia Peyton', position: 'Sales Assistant', picture: '../../../../images/employees/09.png', notes: 'Olivia loves to sell. She has been selling DevAV products since 2012. Olivia was homecoming queen in high school. She is expecting her first child in 6 months. Good Luck Olivia.', }, { id: 2, icon: 'user', text: 'Robert Reagan', position: 'CMO', picture: '../../../../images/employees/03.png', notes: 'Robert was recently voted the CMO of the year by CMO Magazine. He is a proud member of the DevAV Management Team. Robert is a championship BBQ chef, so when you get the chance ask him for his secret recipe.', }, ]; export const selectBoxLabel = { 'aria-label': 'Select Employee' };
<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.3/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
#center-content { display: flex; align-items: center; justify-content: center; } .select-box-container, .multiview-container { padding: 16px; } #demo-items-container { width: 680px; } .employee-info { display: flex; align-items: center; } .employee-photo { height: 80px; width: 80px; border-radius: 50%; border-width: 1px; border-style: solid; flex-shrink: 0; object-fit: contain; margin-right: 24px; border-color: var(--dx-color-border); } .employee-notes b { display: inline-block; margin-bottom: 8px; } .dx-field-label { font-size: 16px; } #multiview { cursor: move; } .demo-info { padding-left: 8px; opacity: 0.6; } .icon-container { padding-left: 16px; display: flex; align-items: center; } .dx-icon { font-size: 18px; }

You can use the following properties to configure selection: