calculateCellValue.md

id	GridBaseColumn.calculateCellValue
type	function(rowData)

---

shortDescription

Calculates custom cell values. Use this function to create an unbound data column.

param(rowData): Object

The data of the row to which the cell belongs.

return: any

A cell's custom value.

context: GridBaseColumn

The this keyword refers to the column's configuration.

---

Unlike data columns bound to a data field, unbound columns display custom values returned from the calculateCellValue function. The component executes this function multiple times for each record: when records are rendered, when users sort or filter them, and when summaries are computed. To avoid errors and enhance the UI component performance, make sure that properties of the rowData object used in calculation exist and keep calculations inside this function as simple as possible.

In the following code, the calculateCellValue function is used to create an unbound column that displays a calculated sales amount. Data objects contain the Price and UnitsSold fields used in the calculation:

---

jQuery

<!-- tab: index.js -->
var products = [{
    ProductID: 1,
    ProductName: "Fabrikam SLR Camera 35\" X358 Blue",
    Price: 168,
    UnitsSold: 4
},
// ...
];

$(function() {
    $("#{widgetName}Container").dx{WidgetName}({
        dataSource: products,
        columns: [{
            caption: "Sales Amount",
            calculateCellValue: function(rowData) {
                return rowData.Price * rowData.UnitsSold;
            }
        },
        // ...
        ]
    });
});

Angular

<!-- tab: app.component.html -->
<dx-{widget-name}
    [dataSource]="products">
    <dxi-{widget-name}-column
        caption="Sales Amount"
        [calculateCellValue]="calculateSalesAmount">
    </dxi-{widget-name}-column>
</dx-{widget-name}>

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    products: Product[];
    constructor(service: Service) {
        this.products = service.getProducts();
    }

    calculateSalesAmount(rowData) {
        return rowData.Price * rowData.UnitsSold;
    }
}

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

export class Product {
    ProductID: number,
    ProductName: string,
    Price: number,
    UnitsSold: number
}

let products: Product[] = [{
    ProductID: 1,
    ProductName: "Fabrikam SLR Camera 35\" X358 Blue",
    Price: 168,
    UnitsSold: 4
},
// ...
];

@Injectable()
export class Service {
    getProducts(): Product[] {
        return products;
    }
}

<!-- 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';
import { Service } from './app.service';

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

Vue

<!-- tab: App.vue -->
<template>
    <Dx{WidgetName}
        :data-source="products">
        <DxColumn
            caption="Sales Amount"
            :calculate-cell-value="calculateSalesAmount">
        </DxColumn>
    </Dx{WidgetName}>
</template>

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

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

import service from './data.js';

export default {
    components: {
        Dx{WidgetName},
        DxColumn
    },
    data() {
        const products = service.getProducts();
        return {
            products
        }
    },
    methods: {
        calculateSalesAmount(rowData) {
            return rowData.Price * rowData.UnitsSold;
        }
    }
}
</script>

<!-- tab: data.js -->
const products = [{
    ProductID: 1,
    ProductName: "Fabrikam SLR Camera 35\" X358 Blue",
    Price: 168,
    UnitsSold: 4
},
// ...
];

export default {
    getProducts() {
        return products;
    }
};

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}';

import service from './data.js';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.products = service.getProducts();
    }

    calculateSalesAmount(rowData) {
        return rowData.Price * rowData.UnitsSold;
    }

    render() {
        return (
            <{WidgetName}
                dataSource={this.products}>
                <Column
                    caption="Sales Amount"
                    calculateCellValue={this.calculateSalesAmount}
                />
            </{WidgetName}>
        );
    }
}
export default App;

<!-- tab: data.js -->
const products = [{
    ProductID: 1,
    ProductName: "Fabrikam SLR Camera 35\" X358 Blue",
    Price: 168,
    UnitsSold: 4
},
// ...
];

export default {
    getProducts() {
        return products;
    }
};

---

The following features are disabled in an unbound column, but you can enable them as described in this table:

Feature	Action that enables it
Editing	Implement the setCellValue function and specify the name property instead of dataField.
Sorting	Set the allowSorting property to true.
Filtering	Set the allowFiltering property to true.
Searching	Set the allowSearch property to true.
Grouping (DataGrid only)	Set the allowGrouping property to true.

To invoke the default behavior, call the defaultCalculateCellValue function and return its result.

---

jQuery

<!-- tab: index.js -->
$(function() {
    $("#{widgetName}Container").dx{WidgetName}({
        columns: [{
            calculateCellValue: function(rowData) {
                // ...
                return this.defaultCalculateCellValue(rowData);
            }
        }]
    });
});

Angular

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    calculateCellValue(rowData) {
        // ...
        const column = this as any;
        return column.defaultCalculateCellValue(rowData);
    }
}

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

Vue

<!-- tab: App.vue -->
<template>
    <Dx{WidgetName} ... >
        <DxColumn ...
            :calculate-cell-value="calculateCellValue">
        </DxColumn>
    </Dx{WidgetName}>
</template>

<script>
// ...
export default {
    // ...
    data() {
        return {
            calculateCellValue: function(rowData) {
                // ...
                const column = this as any;
                return column.defaultCalculateCellValue(rowData);
            }
        }
    }
}
</script>

React

<!-- tab: App.js -->
// ...
class App extends React.Component {
    calculateCellValue(rowData) {
        // ...
        const column = this as any;
        return column.defaultCalculateCellValue(rowData);
    }

    render() {
        return (
            <{WidgetName} ... >
                <Column ...
                    calculateCellValue={this.calculateCellValue}
                />
            </{WidgetName}>
        );
    }
}
export default App;

---

[note]

• The this keyword refers to the column's configuration.

• calculateCellValue is a getter. If you implement the getCombinedFilter(returnDataField) method, pass false to the returnDataField parameter. Alternatively, use getCombinedFilter() instead.

[/note]

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

• columns[].customizeText
• columns[].calculateDisplayValue