DevExtreme React - 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.
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.
Angular
<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 ], // ... })
AngularJS
<div ng-controller="DemoController"> <div dx-tree-view="{ dataSource: hierarchicalData, itemTemplate: 'itemTemplate' }" dx-item-alias="itemObj"> <div data-options="dxTemplate: { name: 'itemTemplate' }"> <i>{{itemObj.text}}</i> </div> </div> </div>
angular.module('DemoApp', ['dx']) .controller('DemoController', function DemoController($scope) { $scope.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' } ] }]; });
dx-item-alias
directive specifies the variable that is used to access the item object.Knockout
<div data-bind="dxTreeView: { dataSource: hierarchicalData, itemTemplate: 'itemTemplate' }"> <div data-options="dxTemplate: { name: 'itemTemplate' } "> <i data-bind="text: text"></i> </div> </div>
var viewModel = { 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' } ] }] }; ko.applyBindings(viewModel);
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.
$(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.
<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
If you have technical questions, please create a support ticket in the DevExpress Support Center.