jQuery TreeView - Customize Node Appearance
For minor customization of nodes, you can define specific fields in node data objects. For example, the following code adds an icon to each node.
jQuery
JavaScript
var hierarchicalData = [{
id: '1',
text: 'Fruits',
icon: '/pics/fruits.ico',
items: [
{ id: '1_1', text: 'Apples', icon: '/pics/fruits/apple.ico' },
{ id: '1_2', text: 'Oranges', icon: '/pics/fruits/orange.ico' }
]
}, {
id: '2',
text: 'Vegetables',
icon: '/pics/vegetables.ico',
items: [
{ id: '2_1', text: 'Cucumbers', icon: '/pics/vegetables/cucumber.ico' },
{ id: '2_2', text: 'Tomatoes', icon: '/pics/vegetables/tomato.ico' }
]
}]
$(function() {
$("#treeViewContainer").dxTreeView({
dataSource: hierarchicalData
});
});Angular
HTML
TypeScript
<dx-tree-view
[dataSource]="hierarchicalData" >
</dx-tree-view>
import { DxTreeViewModule } from "devextreme-angular";
// ...
export class AppComponent {
hierarchicalData = [{
id: '1',
text: 'Fruits',
icon: '/pics/fruits.ico',
items: [
{ id: '1_1', text: 'Apples', icon: '/pics/fruits/apple.ico' },
{ id: '1_2', text: 'Oranges', icon: '/pics/fruits/orange.ico' }
]
}, {
id: '2',
text: 'Vegetables',
icon: '/pics/vegetables.ico',
items: [
{ id: '2_1', text: 'Cucumbers', icon: '/pics/vegetables/cucumber.ico' },
{ id: '2_2', text: 'Tomatoes', icon: '/pics/vegetables/tomato.ico' }
]
}];
}
@NgModule({
imports: [
// ...
DxTreeViewModule
],
// ...
})Vue
App.vue
<template>
<DxTreeView
:items="hierarchicalData"
/>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxTreeView } from 'devextreme-vue/tree-view';
const hierarchicalData = [{
id: '1',
text: 'Fruits',
icon: '/pics/fruits.ico',
items: [
{ id: '1_1', text: 'Apples', icon: '/pics/fruits/apple.ico' },
{ id: '1_2', text: 'Oranges', icon: '/pics/fruits/orange.ico' }
]
}, {
id: '2',
text: 'Vegetables',
icon: '/pics/vegetables.ico',
items: [
{ id: '2_1', text: 'Cucumbers', icon: '/pics/vegetables/cucumber.ico' },
{ id: '2_2', text: 'Tomatoes', icon: '/pics/vegetables/tomato.ico' }
]
}];
export default {
components: {
DxTreeView
},
data() {
return {
hierarchicalData
};
},
};
</script>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import TreeView from 'devextreme-react/tree-view';
const hierarchicalData = [{
id: '1',
text: 'Fruits',
icon: '/pics/fruits.ico',
items: [
{ id: '1_1', text: 'Apples', icon: '/pics/fruits/apple.ico' },
{ id: '1_2', text: 'Oranges', icon: '/pics/fruits/orange.ico' }
]
}, {
id: '2',
text: 'Vegetables',
icon: '/pics/vegetables.ico',
items: [
{ id: '2_1', text: 'Cucumbers', icon: '/pics/vegetables/cucumber.ico' },
{ id: '2_2', text: 'Tomatoes', icon: '/pics/vegetables/tomato.ico' }
]
}];
class App extends React.Component {
render() {
return (
<TreeView
items={hierarchicalData} />
);
}
}
export default App;If you need a more flexible solution, define an itemTemplate.
jQuery
JavaScript
$(function() {
$("#treeViewContainer").dxTreeView({
dataSource: treeViewData,
itemTemplate: function (itemData, itemIndex, itemElement) {
itemElement.append("<i>" + itemData.text + "</i>");
}
});
});Angular
HTML
TypeScript
<dx-tree-view
[dataSource]="hierarchicalData"
itemTemplate="itemTemplate">
<div *dxTemplate="let itemObj of 'itemTemplate'">
<i>{{itemObj.text}}</i>
</div>
</dx-tree-view>
import { DxTreeViewModule } from "devextreme-angular";
// ...
export class AppComponent {
hierarchicalData = [{
id: '1',
text: 'Fruits',
items: [
{ id: '1_1', text: 'Apples' },
{ id: '1_2', text: 'Oranges' }
]
}, {
id: '2',
text: 'Vegetables',
items: [
{ id: '2_1', text: 'Cucumbers' },
{ id: '2_2', text: 'Tomatoes' }
]
}];
}
@NgModule({
imports: [
// ...
DxTreeViewModule
],
// ...
})Vue
App.vue
<template>
<DxTreeView
:items="hierarchicalData">
<template #item="item">
<i>{{ item.data.text }}</i>
</template>
</DxTreeView>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxTreeView } from 'devextreme-vue/tree-view';
const hierarchicalData = [{
id: '1',
text: 'Fruits',
items: [
{ id: '1_1', text: 'Apples' },
{ id: '1_2', text: 'Oranges' }
]
}, {
id: '2',
text: 'Vegetables',
items: [
{ id: '2_1', text: 'Cucumbers' },
{ id: '2_2', text: 'Tomatoes' }
]
}];
export default {
components: {
DxTreeView
},
data() {
return {
hierarchicalData
};
},
};
</script>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import TreeView from 'devextreme-react/tree-view';
const hierarchicalData = [{
id: '1',
text: 'Fruits',
items: [
{ id: '1_1', text: 'Apples' },
{ id: '1_2', text: 'Oranges' }
]
}, {
id: '2',
text: 'Vegetables',
items: [
{ id: '2_1', text: 'Cucumbers' },
{ id: '2_2', text: 'Tomatoes' }
]
}];
class App extends React.Component {
render() {
return (
<TreeView
itemRender={this.renderTreeViewItem}
items={hierarchicalData} />
);
}
renderTreeViewItem(item) {
return (
<i>{item.text}</i>
);
}
}
export default App;jQuery
You can also customize individual nodes. Declare them as scripts and reference them in the template property or assign a customization function straight to this property.
HTML
JavaScript
<div id="treeViewContainer"></div>
<script id="individualItemTemplate" type="text/html">
<p>Oranges</p>
</script>
var treeViewData = [{
id: '1',
text: 'Fruits',
items: [{
template: function() {
return "<i>Apples</i>";
}
}, {
template: $("#individualItemTemplate")
}
]
},
// ...
];Angular
You can also customize individual nodes. Declare them using the dxItem component.
HTML
TypeScript
<dx-tree-view>
<dxi-item>
<i>Apples</i>
</dxi-item>
<dxi-item>
<p>Oranges</p>
</dxi-item>
</dx-tree-view>
import { DxTreeViewModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxTreeViewModule
],
// ...
})Vue
You can also customize individual nodes. Declare them using the dxItem component.
App.vue
<template>
<DxTreeView>
<DxItem>
<template #default>
<i>Apples</i>
</template>
</DxItem>
<DxItem>
<template #default>
<p>Oranges</p>
</template>
</DxItem>
</DxTreeView>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxTreeView, DxItem } from 'devextreme-vue/tree-view';
export default {
components: {
DxTreeView,
DxItem
}
};
</script>React
You can also customize individual nodes. Declare them using the dxItem component.
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import TreeView, { Item } from 'devextreme-react/tree-view';
class App extends React.Component {
render() {
return (
<TreeView>
<Item>
<i>Apples</i>
</Item>
<Item>
<p>Oranges</p>
</Item>
</TreeView>
);
}
}
export default App;See Also
Feedback