Customize Cells

Customize the Value and Text

Use the customizeText function if you need to customize the text displayed in cells.

JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [{
            dataField: "price",
            customizeText: function(cellInfo) {
                return cellInfo.value + "$";
            }
        }]
    });
});

Declare the calculateCellValue function to populate a column with custom values. This function is designed to create unbound columns - columns that are not bound to any individual data field. In the following example, this function combines full names from data that the firstName and lastName fields provide.

JavaScript
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        columns: [{
            caption: "Full Name",
            calculateCellValue: function (rowData) {
                return rowData.firstName + " " + rowData.lastName;
            }
        }]
    });
});

Note that sorting in unbound columns is disabled by default, and their cells cannot be edited at runtime.

Customize the Appearance

DevExtreme provides a markup component called dxTemplate for 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 option.

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, combine the HTML markup for cells using jQuery DOM manipulation methods. 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.

JavaScript
CSS
$(function() {
    $("#treeListContainer").dxTreeList({
        // ...
        onCellPrepared: function(e) {
            if (e.rowType == "detailAdaptive") {
                e.cellElement.addClass("adaptiveRowStyle"); 
            }
        }
    });
});
.adaptiveRowStyle { 
    background-color: #cce6ff;
    font-size: 12pt
}
See Also