DevExtreme React - Customize Cells

Customize the Value and Text

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

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>

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.

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>

Note that sorting in unbound columns is disabled by default, and their cells can be edited at runtime only if you implement the setCellValue function.

Customize the Appearance

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

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, 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.

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