customizeText.md

id	GridBaseColumn.customizeText
type	function(cellInfo)

---

shortDescription

Customizes the text displayed in column cells.

param(cellInfo): Object

Information on the current cell.

field(cellInfo.groupInterval): String | Number

Indicates how header filter values were combined into groups. Available if target is "headerFilter".
See the headerFilter.groupInterval property's description for possible values.

field(cellInfo.target): String

The UI element where the customizeText function was called: "row", "filterRow", "headerFilter", "search", "filterPanel", or "filterBuilder".

field(cellInfo.value): any

The cell value.

field(cellInfo.valueText): String

The formatted value converted to a string.

return: String

The text the cell should display.

context: GridBaseColumn

The this keyword refers to the column's configuration.

---

---

#####jQuery

<!-- tab: index.js -->
$(function() {
    $("#{widgetName}Container").dx{WidgetName}({
        // ...
        columns: [{
            dataField: "Temperature",
            customizeText: function(cellInfo) {
                return cellInfo.value + " °C";
            }
        }]
    });
});

#####Angular

<!-- tab: app.component.html -->
<dx-{widget-name} ... >
   <dxi-{widget-name}-column
       dataField="Temperature"
       [customizeText]="customizeText"
   ></dxi-{widget-name}-column>
</dx-{widget-name}>


<!-- tab: app.component.ts -->
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    customizeText(cellInfo) {
        return cellInfo.value + " °C";
    }
}

<!-- tab: app.module.ts -->
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { Dx{WidgetName}Module } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        Dx{WidgetName}Module
    ],
    providers: [
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

#####Vue

<!-- tab: App.vue -->
<template>
    <Dx{WidgetName} ... >
        <DxColumn
            data-field="Temperature" 
            :customize-text="customizeText"
        />
    </Dx{WidgetName}>
</template>

<script>
import 'devextreme/dist/css/dx.fluent.blue.light.css';

import { Dx{WidgetName}, DxColumn } from "devextreme-vue/{widget-name}";

export default {
    components: {
        Dx{WidgetName},
        DxColumn
    },
    methods: {
        customizeText(cellInfo) {
            return cellInfo.value + " °C";
        }
    }
}
</script>

#####React

<!-- tab: App.js -->
import React from 'react';

import 'devextreme/dist/css/dx.fluent.blue.light.css';

import {WidgetName}, { Column } from "devextreme-react/{widget-name}";

class App extends React.Component {
    customizeText = (cellInfo) => {
        return cellInfo.value + " °C";
    }
    render() {
        return (
            <{WidgetName} ... >
                <Column dataField="Temperature" customizeText={this.customizeText} />
            </{WidgetName}>
        );
    }
}
export default App;

#####ASP.NET MVC Controls

<!--Razor C#-->
@(Html.DevExtreme().{WidgetName}()
    //...
    .Columns(columns => {
        columns.Add().DataField("Temperature")
            .CustomizeText("customizeText");
    })
)

<script type="text/javascript">
    function customizeText(cellInfo) {
        return cellInfo.value + " °C";
    }
</script>

---

[note] The component does not use the specified text to sort, filter, and group data or calculate summaries. If you want to implement described functionality, specify the calculateCellValue function.

You can call the customizeText function to highlight the matching text correctly when the data displayed in the column matches the search condition.

#####See Also#####

• Customize the Value and Text
• columns[].calculateCellValue