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