calculateDisplayValue.md

---

id: GridBaseColumn.calculateDisplayValue type: String | function(rowData)

---

shortDescription

Calculates custom display values for column cells. Requires specifying the dataField or calculateCellValue property. Used in lookup optimization.

param(rowData): Object

The data of the row to which the cell belongs.

return: any

The value for the cell to display.

context: GridBaseColumn

The this keyword refers to the column's configuration.

---

This property accepts the name of the data source field that provides display values...

---

jQuery

<!--JavaScript-->$(function() {
    $("#{widgetName}Container").dx{WidgetName}({
        columns: [{
            dataField: "countryID", // provides values for editing
            calculateDisplayValue: "country" // provides display values
        }]
    });
});

Angular

<!--HTML-->
<dx-{widget-name} ... >
    <dxi-{widget-name}-column
        dataField="countryID" <!-- provides values for editing -->
        calculateDisplayValue="country"> <!-- provides display values -->
    </dxi-{widget-name}-column>
</dx-{widget-name}>

<!--TypeScript-->
import { Dx{WidgetName}Module } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        Dx{WidgetName}Module
    ],
    // ...
})

Vue

<!-- tab: App.vue -->
<template>
    <Dx{WidgetName}>
        <DxColumn          
            data-field="countryID" <!-- provides values for editing -->
            calculate-display-value="country"> <!-- provides display values -->  
        />
    </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 
    },
    // ...
}
</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 {
    // ...

    render() {
        return (
            <{WidgetName}>
                <Column 
                    dataField="countryID"  <!-- provides values for editing -->
                    calculateDisplayValue="country"  <!-- provides display values -->  
                />
            </{WidgetName}>
        );
    }
}
export default App;

ASP.NET MVC Controls

<!--Razor C#-->
@(Html.DevExtreme().{WidgetName}()
    .Columns(columns => columns.Add()
        .DataField("CountryID")
        .CalculateDisplayValue("Country")
    )
)

---

... or a function that combines display values. Specify this function only if all data processing operations are executed on the client.

---

jQuery

<!--JavaScript-->$(function() {
    $("#{widgetName}Container").dx{WidgetName}({
        columns: [{
            dataField: "countryID", // provides values for editing
            calculateDisplayValue: function (rowData) { // combines display values
                return rowData.capital + " (" + rowData.country + ")";
            }
        }]
    });
});

Angular

<!--HTML-->
<dx-{widget-name} ... >
    <dxi-{widget-name}-column
        dataField="countryID" <!-- provides values for editing -->
        [calculateDisplayValue]="getCountryWithCapital"> <!-- combines display values -->
    </dxi-{widget-name}-column>
</dx-{widget-name}>

<!--TypeScript-->
import { Dx{WidgetName}Module } from "devextreme-angular";
// ...
export class AppComponent {
    getCountryWithCapital(rowData) {
        return rowData.capital + " (" + rowData.country + ")";
    }
}
@NgModule({
    imports: [
        // ...
        Dx{WidgetName}Module
    ],
    // ...
})

Vue

<!-- tab: App.vue -->
<template>
    <Dx{WidgetName}>
        <DxColumn       
            data-field="countryID" <!-- provides values for editing -->
            :calculate-display-value="getCountryWithCapital" <!-- combines display values -->
        />
    </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: {
        getCountryWithCapital(rowData) {
            return rowData.capital + " (" + rowData.country + ")";
        }
    }
}
</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 {
    // ...

    render() {
        return (
            <{WidgetName}>
                <Column
                    dataField="countryID" <!-- provides values for editing -->                 
                    calculateDisplayValue={this.getCountryWithCapital} <!-- combines display values -->
                />
            </{WidgetName}>
        );
    }
    
    getCountryWithCapital(rowData) {
        return rowData.capital + " (" + rowData.country + ")";
    }
}
export default App;

ASP.NET MVC Controls

<!--Razor C#-->
@(Html.DevExtreme().{WidgetName}()
    .Columns(columns => columns.Add()
        .DataField("CountryID")
        .CalculateDisplayValue(new JS("getCountryWithCapital"))
    )
)

<script>
    function getCountryWithCapital(rowData) {
        return rowData.capital + " (" + rowData.country + ")";
    }        
</script>


<script>
    function getCountryWithCapital(rowData) {
        return rowData.capital + " (" + rowData.country + ")";
    }        
</script>    

---

The UI component uses the specified display values in sorting, searching, and grouping (in case of DataGrid).

Do not use this property to format text in cells. Instead, use the format, customizeText, or cellTemplate property.