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.
- 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.
- <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.
- $(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.