DevExtreme Accessibility Compliance
DevExtreme component libraries meet a variety of WCAG and Section 508 compliance standards. To assess this demo's accessibility level, click the Run AXE® Validation button to launch the AXE® web accessibility evaluation tool.
All trademarks or registered trademarks are property of their respective owners. AXE® Terms of Use
The overall accessibility level of your application depends on the TreeView features used.
Backend API
import React, { useCallback, useState } from 'react';
import TreeView from 'devextreme-react/tree-view';
import type { TreeViewTypes } from 'devextreme-react/tree-view';
import { products } from './data.ts';
import type { Product } from './types.ts';
const App = () => {
const [currentItem, setCurrentItem] = useState<Product | undefined>({ ...products[0] });
const selectItem = useCallback((e: TreeViewTypes.ItemClickEvent<Product>): void => {
if (!e.itemData) {
return;
}
setCurrentItem({ ...e.itemData });
}, []);
return (
<div className="form">
<TreeView id="simple-treeview"
items={products}
width={300}
onItemClick={selectItem} />
{currentItem?.price
&& <div id="product-details">
<img src={currentItem?.image} alt="Product image" />
<div className="name">{currentItem?.text}</div>
<div className="price">{`$${currentItem?.price}`}</div>
</div>
}
</div>
);
};
export default App;
import React, { useCallback, useState } from 'react';
import TreeView from 'devextreme-react/tree-view';
import { products } from './data.js';
const App = () => {
const [currentItem, setCurrentItem] = useState({ ...products[0] });
const selectItem = useCallback((e) => {
if (!e.itemData) {
return;
}
setCurrentItem({ ...e.itemData });
}, []);
return (
<div className="form">
<TreeView
id="simple-treeview"
items={products}
width={300}
onItemClick={selectItem}
/>
{currentItem?.price && (
<div id="product-details">
<img
src={currentItem?.image}
alt="Product image"
/>
<div className="name">{currentItem?.text}</div>
<div className="price">{`$${currentItem?.price}`}</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'),
);
import type { Product } from './types.ts';
export const products: Product[] = [{
id: '1',
text: 'Stores',
expanded: true,
items: [{
id: '1_1',
text: 'Super Mart of the West',
expanded: true,
items: [{
id: '1_1_1',
text: 'Video Players',
items: [{
id: '1_1_1_1',
text: 'HD Video Player',
price: 220,
image: '../../../../images/products/1.png',
}, {
id: '1_1_1_2',
text: 'SuperHD Video Player',
image: '../../../../images/products/2.png',
price: 270,
}],
}, {
id: '1_1_2',
text: 'Televisions',
expanded: true,
items: [{
id: '1_1_2_1',
text: 'SuperLCD 42',
image: '../../../../images/products/7.png',
price: 1200,
}, {
id: '1_1_2_2',
text: 'SuperLED 42',
image: '../../../../images/products/5.png',
price: 1450,
}, {
id: '1_1_2_3',
text: 'SuperLED 50',
image: '../../../../images/products/4.png',
price: 1600,
}, {
id: '1_1_2_4',
text: 'SuperLCD 55',
image: '../../../../images/products/6.png',
price: 1350,
}, {
id: '1_1_2_5',
text: 'SuperLCD 70',
image: '../../../../images/products/9.png',
price: 4000,
}],
}, {
id: '1_1_3',
text: 'Monitors',
expanded: true,
items: [{
id: '1_1_3_1',
text: '19"',
expanded: true,
items: [{
id: '1_1_3_1_1',
text: 'DesktopLCD 19',
image: '../../../../images/products/10.png',
price: 160,
}],
}, {
id: '1_1_3_2',
text: '21"',
items: [{
id: '1_1_3_2_1',
text: 'DesktopLCD 21',
image: '../../../../images/products/12.png',
price: 170,
}, {
id: '1_1_3_2_2',
text: 'DesktopLED 21',
image: '../../../../images/products/13.png',
price: 175,
}],
}],
}, {
id: '1_1_4',
text: 'Projectors',
items: [{
id: '1_1_4_1',
text: 'Projector Plus',
image: '../../../../images/products/14.png',
price: 550,
}, {
id: '1_1_4_2',
text: 'Projector PlusHD',
image: '../../../../images/products/15.png',
price: 750,
}],
}],
}, {
id: '1_2',
text: 'Braeburn',
items: [{
id: '1_2_1',
text: 'Video Players',
items: [{
id: '1_2_1_1',
text: 'HD Video Player',
image: '../../../../images/products/1.png',
price: 240,
}, {
id: '1_2_1_2',
text: 'SuperHD Video Player',
image: '../../../../images/products/2.png',
price: 300,
}],
}, {
id: '1_2_2',
text: 'Televisions',
items: [{
id: '1_2_2_1',
text: 'SuperPlasma 50',
image: '../../../../images/products/3.png',
price: 1800,
}, {
id: '1_2_2_2',
text: 'SuperPlasma 65',
image: '../../../../images/products/8.png',
price: 3500,
}],
}, {
id: '1_2_3',
text: 'Monitors',
items: [{
id: '1_2_3_1',
text: '19"',
items: [{
id: '1_2_3_1_1',
text: 'DesktopLCD 19',
image: '../../../../images/products/10.png',
price: 170,
}],
}, {
id: '1_2_3_2',
text: '21"',
items: [{
id: '1_2_3_2_1',
text: 'DesktopLCD 21',
image: '../../../../images/products/12.png',
price: 180,
}, {
id: '1_2_3_2_2',
text: 'DesktopLED 21',
image: '../../../../images/products/13.png',
price: 190,
}],
}],
}],
}, {
id: '1_3',
text: 'E-Mart',
items: [{
id: '1_3_1',
text: 'Video Players',
items: [{
id: '1_3_1_1',
text: 'HD Video Player',
image: '../../../../images/products/1.png',
price: 220,
}, {
id: '1_3_1_2',
text: 'SuperHD Video Player',
image: '../../../../images/products/2.png',
price: 275,
}],
}, {
id: '1_3_3',
text: 'Monitors',
items: [{
id: '1_3_3_1',
text: '19"',
items: [{
id: '1_3_3_1_1',
text: 'DesktopLCD 19',
image: '../../../../images/products/10.png',
price: 165,
}],
}, {
id: '1_3_3_2',
text: '21"',
items: [{
id: '1_3_3_2_1',
text: 'DesktopLCD 21',
image: '../../../../images/products/12.png',
price: 175,
}],
}],
}],
}, {
id: '1_4',
text: 'Walters',
items: [{
id: '1_4_1',
text: 'Video Players',
items: [{
id: '1_4_1_1',
text: 'HD Video Player',
image: '../../../../images/products/1.png',
price: 210,
}, {
id: '1_4_1_2',
text: 'SuperHD Video Player',
image: '../../../../images/products/2.png',
price: 250,
}],
}, {
id: '1_4_2',
text: 'Televisions',
items: [{
id: '1_4_2_1',
text: 'SuperLCD 42',
image: '../../../../images/products/7.png',
price: 1100,
}, {
id: '1_4_2_2',
text: 'SuperLED 42',
image: '../../../../images/products/5.png',
price: 1400,
}, {
id: '1_4_2_3',
text: 'SuperLED 50',
image: '../../../../images/products/4.png',
price: 1500,
}, {
id: '1_4_2_4',
text: 'SuperLCD 55',
image: '../../../../images/products/6.png',
price: 1300,
}, {
id: '1_4_2_5',
text: 'SuperLCD 70',
image: '../../../../images/products/9.png',
price: 4000,
}, {
id: '1_4_2_6',
text: 'SuperPlasma 50',
image: '../../../../images/products/3.png',
price: 1700,
}],
}, {
id: '1_4_3',
text: 'Monitors',
items: [{
id: '1_4_3_1',
text: '19"',
items: [{
id: '1_4_3_1_1',
text: 'DesktopLCD 19',
image: '../../../../images/products/10.png',
price: 160,
}],
}, {
id: '1_4_3_2',
text: '21"',
items: [{
id: '1_4_3_2_1',
text: 'DesktopLCD 21',
image: '../../../../images/products/12.png',
price: 170,
}, {
id: '1_4_3_2_2',
text: 'DesktopLED 21',
image: '../../../../images/products/13.png',
price: 180,
}],
}],
}, {
id: '1_4_4',
text: 'Projectors',
items: [{
id: '1_4_4_1',
text: 'Projector Plus',
image: '../../../../images/products/14.png',
price: 550,
}, {
id: '1_4_4_2',
text: 'Projector PlusHD',
image: '../../../../images/products/15.png',
price: 750,
}],
}],
}],
}];
export type Product = {
id: string;
text: string;
expanded?: boolean;
items?: Product[];
price?: number;
image?: string;
};
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
export const products = [
{
id: '1',
text: 'Stores',
expanded: true,
items: [
{
id: '1_1',
text: 'Super Mart of the West',
expanded: true,
items: [
{
id: '1_1_1',
text: 'Video Players',
items: [
{
id: '1_1_1_1',
text: 'HD Video Player',
price: 220,
image: '../../../../images/products/1.png',
},
{
id: '1_1_1_2',
text: 'SuperHD Video Player',
image: '../../../../images/products/2.png',
price: 270,
},
],
},
{
id: '1_1_2',
text: 'Televisions',
expanded: true,
items: [
{
id: '1_1_2_1',
text: 'SuperLCD 42',
image: '../../../../images/products/7.png',
price: 1200,
},
{
id: '1_1_2_2',
text: 'SuperLED 42',
image: '../../../../images/products/5.png',
price: 1450,
},
{
id: '1_1_2_3',
text: 'SuperLED 50',
image: '../../../../images/products/4.png',
price: 1600,
},
{
id: '1_1_2_4',
text: 'SuperLCD 55',
image: '../../../../images/products/6.png',
price: 1350,
},
{
id: '1_1_2_5',
text: 'SuperLCD 70',
image: '../../../../images/products/9.png',
price: 4000,
},
],
},
{
id: '1_1_3',
text: 'Monitors',
expanded: true,
items: [
{
id: '1_1_3_1',
text: '19"',
expanded: true,
items: [
{
id: '1_1_3_1_1',
text: 'DesktopLCD 19',
image: '../../../../images/products/10.png',
price: 160,
},
],
},
{
id: '1_1_3_2',
text: '21"',
items: [
{
id: '1_1_3_2_1',
text: 'DesktopLCD 21',
image: '../../../../images/products/12.png',
price: 170,
},
{
id: '1_1_3_2_2',
text: 'DesktopLED 21',
image: '../../../../images/products/13.png',
price: 175,
},
],
},
],
},
{
id: '1_1_4',
text: 'Projectors',
items: [
{
id: '1_1_4_1',
text: 'Projector Plus',
image: '../../../../images/products/14.png',
price: 550,
},
{
id: '1_1_4_2',
text: 'Projector PlusHD',
image: '../../../../images/products/15.png',
price: 750,
},
],
},
],
},
{
id: '1_2',
text: 'Braeburn',
items: [
{
id: '1_2_1',
text: 'Video Players',
items: [
{
id: '1_2_1_1',
text: 'HD Video Player',
image: '../../../../images/products/1.png',
price: 240,
},
{
id: '1_2_1_2',
text: 'SuperHD Video Player',
image: '../../../../images/products/2.png',
price: 300,
},
],
},
{
id: '1_2_2',
text: 'Televisions',
items: [
{
id: '1_2_2_1',
text: 'SuperPlasma 50',
image: '../../../../images/products/3.png',
price: 1800,
},
{
id: '1_2_2_2',
text: 'SuperPlasma 65',
image: '../../../../images/products/8.png',
price: 3500,
},
],
},
{
id: '1_2_3',
text: 'Monitors',
items: [
{
id: '1_2_3_1',
text: '19"',
items: [
{
id: '1_2_3_1_1',
text: 'DesktopLCD 19',
image: '../../../../images/products/10.png',
price: 170,
},
],
},
{
id: '1_2_3_2',
text: '21"',
items: [
{
id: '1_2_3_2_1',
text: 'DesktopLCD 21',
image: '../../../../images/products/12.png',
price: 180,
},
{
id: '1_2_3_2_2',
text: 'DesktopLED 21',
image: '../../../../images/products/13.png',
price: 190,
},
],
},
],
},
],
},
{
id: '1_3',
text: 'E-Mart',
items: [
{
id: '1_3_1',
text: 'Video Players',
items: [
{
id: '1_3_1_1',
text: 'HD Video Player',
image: '../../../../images/products/1.png',
price: 220,
},
{
id: '1_3_1_2',
text: 'SuperHD Video Player',
image: '../../../../images/products/2.png',
price: 275,
},
],
},
{
id: '1_3_3',
text: 'Monitors',
items: [
{
id: '1_3_3_1',
text: '19"',
items: [
{
id: '1_3_3_1_1',
text: 'DesktopLCD 19',
image: '../../../../images/products/10.png',
price: 165,
},
],
},
{
id: '1_3_3_2',
text: '21"',
items: [
{
id: '1_3_3_2_1',
text: 'DesktopLCD 21',
image: '../../../../images/products/12.png',
price: 175,
},
],
},
],
},
],
},
{
id: '1_4',
text: 'Walters',
items: [
{
id: '1_4_1',
text: 'Video Players',
items: [
{
id: '1_4_1_1',
text: 'HD Video Player',
image: '../../../../images/products/1.png',
price: 210,
},
{
id: '1_4_1_2',
text: 'SuperHD Video Player',
image: '../../../../images/products/2.png',
price: 250,
},
],
},
{
id: '1_4_2',
text: 'Televisions',
items: [
{
id: '1_4_2_1',
text: 'SuperLCD 42',
image: '../../../../images/products/7.png',
price: 1100,
},
{
id: '1_4_2_2',
text: 'SuperLED 42',
image: '../../../../images/products/5.png',
price: 1400,
},
{
id: '1_4_2_3',
text: 'SuperLED 50',
image: '../../../../images/products/4.png',
price: 1500,
},
{
id: '1_4_2_4',
text: 'SuperLCD 55',
image: '../../../../images/products/6.png',
price: 1300,
},
{
id: '1_4_2_5',
text: 'SuperLCD 70',
image: '../../../../images/products/9.png',
price: 4000,
},
{
id: '1_4_2_6',
text: 'SuperPlasma 50',
image: '../../../../images/products/3.png',
price: 1700,
},
],
},
{
id: '1_4_3',
text: 'Monitors',
items: [
{
id: '1_4_3_1',
text: '19"',
items: [
{
id: '1_4_3_1_1',
text: 'DesktopLCD 19',
image: '../../../../images/products/10.png',
price: 160,
},
],
},
{
id: '1_4_3_2',
text: '21"',
items: [
{
id: '1_4_3_2_1',
text: 'DesktopLCD 21',
image: '../../../../images/products/12.png',
price: 170,
},
{
id: '1_4_3_2_2',
text: 'DesktopLED 21',
image: '../../../../images/products/13.png',
price: 180,
},
],
},
],
},
{
id: '1_4_4',
text: 'Projectors',
items: [
{
id: '1_4_4_1',
text: 'Projector Plus',
image: '../../../../images/products/14.png',
price: 550,
},
{
id: '1_4_4_2',
text: 'Projector PlusHD',
image: '../../../../images/products/15.png',
price: 750,
},
],
},
],
},
],
},
];
<!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/26.1.5/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="./bundle.css" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
<script src="bundles/vendor/react.vendor.js"></script>
<script src="./bundle.js"></script>
</body>
</html>
#simple-treeview,
#product-details {
display: inline-block;
}
#product-details {
vertical-align: top;
width: 400px;
height: 420px;
margin-left: 20px;
}
#product-details > img {
border: none;
height: 300px;
width: 400px;
}
#product-details > .name {
text-align: center;
font-size: 20px;
}
#product-details > .price {
text-align: center;
font-size: 24px;
}
.dark #product-details > div {
color: #f0f0f0;
}
.hidden {
visibility: hidden;
}
Each object in the TreeView's hierarchical data structure should include the following fields:
You can respectively use the keyExpr, displayExpr, and itemsExpr properties to specify custom names for the above-mentioned fields. Node objects can also include developer-defined fields and properties from this help section: items[].
In this demo, nodes use the expanded property, which specifies whether a node is collapsed or expanded. They also include the developer-defined price and image fields.
To get started with the DevExtreme TreeView component, refer to the following tutorial for step-by-step instructions: Getting Started with TreeView.