Vue 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.
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
- });
- });
If you need a more flexible solution, define an itemTemplate.
JavaScript
- $(function() {
- $("#treeViewContainer").dxTreeView({
- dataSource: treeViewData,
- itemTemplate: function (itemData, itemIndex, itemElement) {
- itemElement.append("<i>" + itemData.text + "</i>");
- }
- });
- });
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")
- }
- ]
- },
- // ...
- ];
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.