Customize the Value and Text
Use the customizeText function to customize the text displayed in cells. Note that this text is not used to sort, filter, and group data or calculate summaries.
jQuery
JavaScript
$(function() { $("#dataGridContainer").dxDataGrid({ // ... columns: [{ dataField: "Price", customizeText: function(cellInfo) { return cellInfo.value + "$"; } }] });});Angular
TypeScript
HTML
import { DxDataGridModule } from "devextreme-angular";// ...export class AppComponent { constructor() { // Uncomment the line below if the function should be executed in the component's context // this.priceColumn_customizeText = this.priceColumn_customizeText.bind(this); } priceColumn_customizeText (cellInfo) { return cellInfo.value + "$"; }}@NgModule({ imports: [ // ... DxDataGridModule ], // ...})<dx-data-grid ... > <dxi-column dataField="Price" [customizeText]="priceColumn_customizeText"></dxi-column></dx-data-grid>
Vue
App.vue
<template> <DxDataGrid ... > <DxColumn data-field="Price" :customize-text="priceColumn_customizeText" /> </DxDataGrid></template><script>import 'devextreme/dist/css/dx.light.css';import DxDataGrid, { DxColumn} from 'devextreme-vue/data-grid';export default { components: { DxDataGrid, DxColumn }, methods: { priceColumn_customizeText(cellInfo) { return cellInfo.value + '$'; } }}</script>React
App.js
import React from 'react';import 'devextreme/dist/css/dx.light.css';import DataGrid, { Column} from 'devextreme-react/data-grid';class App extends React.Component { constructor(props) { super(props); // Uncomment the line below if the function should be executed in the component's context // this.priceColumn_customizeText = this.priceColumn_customizeText.bind(this); } priceColumn_customizeText(cellInfo) { return cellInfo.value + '$'; } render() { return ( <DataGrid ... > <Column dataField="Price" customizeText={priceColumn_customizeText} /> </DataGrid> ); }}export default App;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() { $("#dataGridContainer").dxDataGrid({ // ... columns: [{ caption: "Full Name", calculateCellValue: function (rowData) { return rowData.firstName + " " + rowData.lastName; } }] });});Angular
TypeScript
HTML
import { DxDataGridModule } from "devextreme-angular";// ...export class AppComponent { constructor() { // Uncomment the line below if the function should be executed in the component's context // this.fullNameColumn_calculateCellValue = this.fullNameColumn_calculateCellValue.bind(this); } fullNameColumn_calculateCellValue (rowData) { return rowData.firstName + " " + rowData.lastName; }}@NgModule({ imports: [ // ... DxDataGridModule ], // ...})<dx-data-grid ... > <dxi-column caption="Full Name" [calculateCellValue]="fullNameColumn_calculateCellValue"></dxi-column></dx-data-grid>
Vue
App.vue
<template> <DxDataGrid ... > <DxColumn caption="Full Name" :calculate-cell-value="fullNameColumn_calculateCellValue" /> </DxDataGrid></template><script>import 'devextreme/dist/css/dx.light.css';import DxDataGrid, { DxColumn} from 'devextreme-vue/data-grid';export default { components: { DxDataGrid, DxColumn }, methods: { fullNameColumn_calculateCellValue(rowData) { return rowData.firstName + ' ' + rowData.lastName; } }}</script>React
App.js
import React from 'react';import 'devextreme/dist/css/dx.light.css';import DataGrid, { Column} from 'devextreme-react/data-grid';class App extends React.Component { constructor(props) { super(props); // Uncomment the line below if the function should be executed in the component's context // this.fullNameColumn_calculateCellValue = this.fullNameColumn_calculateCellValue.bind(this); } fullNameColumn_calculateCellValue(rowData) { return rowData.firstName + ' ' + rowData.lastName; } render() { return ( <DataGrid ... > <Column caption="Full Name" calculateCellValue={fullNameColumn_calculateCellValue} /> </DataGrid> ); }}export default App;View Demo
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
Cell appearance is customized using a column's cellTemplate.
jQuery
JavaScript
$(function() { $("#dataGridContainer").dxDataGrid({ // ... columns: [{ dataField: "Title", cellTemplate: function(element, info) { element.append("<div>" + info.text + "</div>") .css("color", "blue"); } }] });});Angular
HTML
TypeScript
<dx-data-grid ... > <dxi-column dataField="Title" cellTemplate="cellTemplate"></dxi-column> <div *dxTemplate="let data of 'cellTemplate'"> <div style="color:blue">{{data.text}}</div> </div></dx-data-grid>import { DxDataGridModule } from "devextreme-angular";// ...export class AppComponent { // ...}@NgModule({ imports: [ // ... DxDataGridModule ], // ...})Vue
App.vue
<template> <DxDataGrid ... > <DxColumn data-field="Title" cell-template="grid-cell" /> <template #grid-cell="{ data }"> <div style="color:blue">{{ data.text }}</div> </template> </DxDataGrid></template><script>import 'devextreme/dist/css/dx.light.css';import DxDataGrid, { DxColumn} from 'devextreme-vue/data-grid';export default { components: { DxDataGrid, DxColumn }, // ...}</script>React
App.js
import React from 'react';import 'devextreme/dist/css/dx.light.css';import DataGrid, { Column} from 'devextreme-react/data-grid';const renderGridCell = (data) => { return <div style={{ color: 'blue' }}>{data.text}</div>;}class App extends React.Component { render() { return ( <DataGrid ... > <Column dataField="Title" cellRender={renderGridCell} /> </DataGrid> ); }}export default App;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() { $("#dataGridContainer").dxDataGrid({ // ... onCellPrepared: function(e) { if (e.rowType == "detailAdaptive") { e.cellElement.addClass("adaptiveRowStyle"); } } });});.adaptiveRowStyle { background-color: #cce6ff; font-size: 12pt}Angular
TypeScript
HTML
CSS
import { DxDataGridModule } from "devextreme-angular";// ...export class AppComponent { onCellPrepared (e) { if (e.rowType == "detailAdaptive") { e.cellElement.classList.add("adaptiveRowStyle"); } }}@NgModule({ imports: [ // ... DxDataGridModule ], // ...})<dx-data-grid (onCellPrepared)="onCellPrepared($event)"></dx-data-grid>
.adaptiveRowStyle { background-color: #cce6ff; font-size: 12pt}Vue
App.vue
<template> <DxDataGrid ... @cell-prepared="onCellPrepared"> </DxDataGrid></template><script>import 'devextreme/dist/css/dx.light.css';import DxDataGrid from 'devextreme-vue/data-grid';export default { components: { DxDataGrid }, methods: { onCellPrepared(e) { if (e.rowType == 'detailAdaptive') { e.cellElement.classList.add('adaptiveRowStyle'); } } }}</script><style scoped> .adaptiveRowStyle { background-color: #cce6ff; font-size: 12pt }</style>React
App.js
import React from 'react';import 'devextreme/dist/css/dx.light.css';import DataGrid from 'devextreme-react/data-grid';class App extends React.Component { constructor(props) { super(props); // Uncomment the line below if the function should be executed in the component's context // this.onCellPrepared = this.onCellPrepared.bind(this); } onCellPrepared(e) { if (e.rowType == 'detailAdaptive') { e.cellElement.classList.add('adaptiveRowStyle'); } } render() { return ( <DataGrid ... onCellPrepared={this.onCellPrepared}> </DataGrid> ); }}export default App;View Demo
See Also
- Customize Column Headers
Was this topic helpful?
Feel free toshare topic-related thoughts here.
Ifyou have technical questions, please create asupport ticket inthe DevExpress Support Center.
Thank you for the feedback!
