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
<template>
<div class="form">
<DxTreeView
id="simple-treeview"
:items="products"
:width="300"
@item-click="selectItem"
/>
<div
v-if="currentItem.price"
id="product-details"
>
<img :src="currentItem.image">
<div class="name">{{ currentItem.text }}</div>
<div class="price">{{ "$" + currentItem.price }}</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import DxTreeView, { type DxTreeViewTypes } from 'devextreme-vue/tree-view';
import service from './data.ts';
import type { Product } from './types';
const products: Product[] = service.getProducts();
const currentItem = ref<Product>(products[0]);
function selectItem({ itemData }: DxTreeViewTypes.ItemClickEvent) {
if (itemData) {
currentItem.value = itemData;
}
}
</script>
<style>
#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;
}
</style>
import type { Product } from "./types";
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 default {
getProducts() {
return products;
},
};
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
export interface Product {
id: string;
text: string;
expanded?: boolean;
items?: Product[];
price?: number;
image?: string;
}
<!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/vue.vendor.js"></script>
<script src="./bundle.js"></script>
</body>
</html>
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.