DevExtreme Angular - Customize Node Appearance

For minor customization of nodes, you can use the default item template. This template defines the appearance of a node depending on whether specific fields are present or absent from the node's data object. 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
  • });
  • });

Using the default item template is the easiest way to customize an item, but it lacks flexibility. Instead, you can define a custom template. For Angular, AngularJS, and Knockout apps, DevExtreme provides a markup component called dxTemplate. The following code gives a simple example of how you can use dxTemplate to customize nodes.

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
  • ],
  • // ...
  • })

If you use jQuery alone, combine the HTML markup manually with jQuery DOM manipulation methods. To apply the markup to the TreeView nodes, use the itemTemplate callback function.

JavaScript
  • $(function() {
  • $("#treeViewContainer").dxTreeView({
  • dataSource: treeViewData,
  • itemTemplate: function (itemData, itemIndex, itemElement) {
  • itemElement.append("<i>" + itemData.text + "</i>");
  • }
  • });
  • });

You can also customize an individual node. For this purpose, declare a template for this node as a script and pass its id to the template option.

HTML
JavaScript
  • <script id="individualTemplate" type="text/html">
  • <!-- ... -->
  • </script>
  • var treeViewData = [{
  • id: '1',
  • text: 'Fruits',
  • items: [
  • { id: '1_1', text: 'Apples', template: $("#individualItemTemplate") },
  • { id: '1_2', text: 'Oranges' }
  • ]
  • },
  • // ...
  • ];

In addition, you can use a 3rd-party template engine to customize widget appearance. For more information, see the 3rd-Party Template Engines article.

See Also