Angular TreeList - Customize Cells

Customize the Value and Text

Use the customizeText function to customize the text displayed in cells. Note that this text is not used is not used to sort, filter, and group data or calculate summaries.

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [{
            dataField: "Price",
            customizeText: function(cellInfo) {
                return cellInfo.value + "$";
            }
        }]
    });
});
Angular
TypeScript
HTML
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    priceColumn_customizeText (cellInfo) {
        return cellInfo.value + "$";
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
<dx-tree-list ... >
    <dxi-column dataField="Price" [customizeText]="priceColumn_customizeText"></dxi-column>
</dx-tree-list>

To use the text displayed in cells in those data processing operations, specify the calculateCellValue function instead. It populates a column with custom values and allows you to create unbound columns - columns that are not bound to any individual data field. In the following example, this function combines full names using data from the firstName and lastName fields:

jQuery
JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [{
            caption: "Full Name",
            calculateCellValue: function (rowData) {
                return rowData.firstName + " " + rowData.lastName;
            }
        }]
    });
});
Angular
TypeScript
HTML
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    fullNameColumn_calculateCellValue (rowData) {
        return rowData.firstName + " " + rowData.lastName;
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
<dx-tree-list ... >
    <dxi-column caption="Full Name" [calculateCellValue]="fullNameColumn_calculateCellValue"></dxi-column>
</dx-tree-list>

Some features are disabled in columns with calculated values. Refer to the calculateCellValue description for a list of disabled features and the properties that enable them.

Customize the Appearance

DevExtreme provides the dxTemplate markup component for Angular, AngularJS and Knockout apps. The following code shows how you can customize column cells using this component. Note that the template's name is assigned to the column's cellTemplate property.

Angular
HTML
TypeScript
<dx-tree-list ... >
    <dxi-column dataField="Title" cellTemplate="cellTemplate"></dxi-column>
    <div *dxTemplate="let cell of 'cellTemplate'">
        <div style="color:blue">{{ cell.text }}</div>
    </div>
</dx-tree-list>
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
AngularJS
HTML
<div ng-controller="DemoController">
    <div dx-tree-list="{
        ...
        columns: [{
            dataField: 'Title',
            cellTemplate: 'cellTemplate'
        }]
    }" dx-item-alias="cell">
        <div data-options="dxTemplate: { name: 'cellTemplate' }">
            <div style="color:blue">{{ cell.text }}</div>
        </div>
    </div>
</div>
NOTE
The dx-item-alias directive specifies the variable used to access cell settings.
Knockout
HTML
<div data-bind="dxTreeList: {
    ...
    columns: [{
        dataField: 'Title',
        cellTemplate: 'cellTemplate'
    }]
}">
    <div data-options="dxTemplate: { name: 'cellTemplate' }">
        <div style="color:blue" data-bind="text: $data.text"></div>
    </div>
</div>

If you use jQuery alone, use DOM manipulation methods to combine the HTML markup for cells. To apply this markup, use the cellTemplate function as shown in the following code:

jQuery

JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [{
            dataField: "Title",
            cellTemplate: function(element, info) {
                 element.append("<div>" + info.text + "</div>")
                        .css("color", "blue");
            }
        }]
    });
});

While cellTemplate customizes data cells only, the onCellPrepared function can customize any cell. Unlike cellTemplate, this function does customizations after a cell is created, so you cannot use it to change the cell value. Check the rowType field of the function's argument to detect the UI element that owns the cell.

jQuery
JavaScript
CSS
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        onCellPrepared: function(e) {
            if (e.rowType == "detailAdaptive") {
                e.cellElement.addClass("adaptiveRowStyle"); 
            }
        }
    });
});
.adaptiveRowStyle { 
    background-color: #cce6ff;
    font-size: 12pt
}
Angular
TypeScript
HTML
CSS
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    onCellPrepared (e) {
        if (e.rowType == "detailAdaptive") {
            e.cellElement.addClass("adaptiveRowStyle");
        }
    }
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
<dx-tree-list
    (onCellPrepared)="onCellPrepared($event)">
</dx-tree-list>
.adaptiveRowStyle { 
    background-color: #cce6ff;
    font-size: 12pt
}
See Also