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
$(function() { $("#treeListContainer").dxTreeList({ // ... columns: [{ dataField: "Price", customizeText: function(cellInfo) { return cellInfo.value + "$"; } }] }); });
Angular
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>
Vue
<template> <DxTreeList ... > <DxColumn data-field="Price" :customize-text="priceColumn_customizeText" /> </DxTreeList> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxTreeList, { DxColumn } from 'devextreme-vue/tree-list'; export default { components: { DxTreeList, DxColumn }, methods: { priceColumn_customizeText(cellInfo) { return cellInfo.value + '$'; } } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import TreeList, { Column } from 'devextreme-react/tree-list'; const priceColumn_customizeText = (cellInfo) => { return cellInfo.value + '$'; }; export default function App() { return ( <TreeList ... > <Column dataField="Price" customizeText={priceColumn_customizeText} /> </TreeList> ); }
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
$(function() { $("#treeListContainer").dxTreeList({ // ... columns: [{ caption: "Full Name", calculateCellValue: function (rowData) { return rowData.firstName + " " + rowData.lastName; } }] }); });
Angular
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>
Vue
<template> <DxTreeList ... > <DxColumn caption="Full Name" :calculate-cell-value="fullNameColumn_calculateCellValue" /> </DxTreeList> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxTreeList, { DxColumn } from 'devextreme-vue/tree-list'; export default { components: { DxTreeList, DxColumn }, methods: { fullNameColumn_calculateCellValue(rowData) { return rowData.firstName + ' ' + rowData.lastName; } } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import TreeList, { Column } from 'devextreme-react/tree-list'; const fullNameColumn_calculateCellValue = (rowData) => { return rowData.firstName + ' ' + rowData.lastName; }; export default function App() { return ( <TreeList ... > <Column caption="Full Name" calculateCellValue={fullNameColumn_calculateCellValue} /> </TreeList> ); }
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
To customize cell appearance, use a column's cellTemplate.
jQuery
$(function() { $("#treeListContainer").dxTreeList({ // ... columns: [{ dataField: "Title", cellTemplate: function(element, info) { element.append("<div>" + info.text + "</div>") .css("color", "blue"); } }] }); });
Angular
<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 ], // ... })
Vue
<template> <DxTreeList ... > <DxColumn data-field="Title" cell-template="cell" /> <template #cell="{ data }"> <div style="color:blue">{{ data.cell.text }}</div> </template> </DxTreeList> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxTreeList, { DxColumn } from 'devextreme-vue/tree-list'; export default { components: { DxTreeList, DxColumn }, // ... } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import TreeList, { Column } from 'devextreme-react/tree-list'; const renderCell = (data) => { return <div style={{ color: 'blue' }}>{data.cell.text}</div>; }; export default function App() { return ( <TreeList ... > <Column dataField="Title" cellRender={renderCell} /> </TreeList> ); }
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
$(function() { $("#treeListContainer").dxTreeList({ // ... onCellPrepared: function(e) { if (e.rowType == "detailAdaptive") { e.cellElement.addClass("adaptiveRowStyle"); } } }); });
.adaptiveRowStyle { background-color: #cce6ff; font-size: 12pt }
Angular
import { DxTreeListModule } from "devextreme-angular"; // ... export class AppComponent { onCellPrepared (e) { if (e.rowType == "detailAdaptive") { e.cellElement.classList.add("adaptiveRowStyle"); } } } @NgModule({ imports: [ // ... DxTreeListModule ], // ... })
<dx-tree-list (onCellPrepared)="onCellPrepared($event)"> </dx-tree-list>
.adaptiveRowStyle { background-color: #cce6ff; font-size: 12pt }
Vue
<template> <DxTreeList ... @cell-prepared="onCellPrepared"> </DxTreeList> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxTreeList from 'devextreme-vue/tree-list'; export default { components: { DxTreeList }, methods: { onCellPrepared(e) { if (e.rowType == 'detailAdaptive') { e.cellElement.classList.add('adaptiveRowStyle'); } } } } </script> <style scoped> .adaptiveRowStyle { background-color: #cce6ff; font-size: 12pt } </style>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import TreeList from 'devextreme-react/tree-list'; const onCellPrepared = (e) => { if (e.rowType == 'detailAdaptive') { e.cellElement.classList.add('adaptiveRowStyle'); } }; export default function App() { return ( <TreeList ... onCellPrepared={onCellPrepared}> </TreeList> ); }
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.