All docs
V21.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Format Text and Value

Customize a summary item's text and value format using the displayFormat and valueFormat properties. The following code changes the default text and shows an item with the applied currency format. The text includes the parent column's caption because this item is shown in another column.

jQuery
JavaScript
$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        summary: {
            totalItems: [{
                column: "SaleAmount",
                summaryType: "sum",
                showInColumn: "TotalAmount",
                valueFormat: "currency",
                displayFormat: "Column: {1}. Sales: {0}"
            },
            // ...
            ]
        }
    });
});
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxo-summary>
        <dxi-total-item
            column="SaleAmount"
            summaryType="sum"
            showInColumn="TotalAmount"
            valueFormat="currency"
            displayFormat="Column: {1}. Sales: {0}">
        </dxi-total-item>
    </dxo-summary>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxDataGrid ... >
        <DxSummary>
            <DxTotalItem
                column="SaleAmount"
                summary-type="sum"
                show-in-column="TotalAmount"
                value-format="currency"
                display-format="Column: {1}. Sales: {0}"
            />
        </DxSummary>
    </DxDataGrid>
</template>

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

import DxDataGrid, {
    DxSummary,
    DxTotalItem
} from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid,
        DxSummary,
        DxTotalItem
    },
    // ...
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import DataGrid, {
    Summary,
    TotalItem
} from 'devextreme-react/data-grid';

export default function App() {
    return (
        <DataGrid ... >
            <Summary>
                <TotalItem
                    column="SaleAmount"
                    summaryType="sum"
                    showInColumn="TotalAmount"
                    valueFormat="currency"
                    displayFormat="Column: {1}. Sales: {0}"
                />
            </Summary>
        </DataGrid>
    );
}

Specify the customizeText function for a more detailed customization.

jQuery
JavaScript
$(function () {
    $("#dataGridContainer").dxDataGrid({
        // ...
        summary: {
            groupItems: [{
                column: "OrderNumber",
                summaryType: "count",
                customizeText: function (e) {
                    return e.value < 4 ? "Less than 4 items" : "Items: " + e.value;
                }
            },
            // ...
            ]
        }
    });
});
Angular
HTML
TypeScript
<dx-data-grid ... >
    <dxo-summary>
        <dxi-group-item
            column="OrderNumber"
            summaryType="count"
            [customizeText]="customizeText">
        </dxi-group-item>
    </dxo-summary>
</dx-data-grid>
import { DxDataGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    customizeText (e) {
        return e.value < 4 ? "Less than 4 items" : "Items: " + e.value;
    };
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxDataGrid ... >
        <DxSummary>
            <DxGroupItem
                column="OrderNumber"
                summary-type="count"
                :customize-text="customizeText"
            />
        </DxSummary>
    </DxDataGrid>
</template>

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

import DxDataGrid, {
    DxSummary,
    DxGroupItem
} from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid,
        DxSummary,
        DxGroupItem
    },
    // ...
    methods: {
        customizeText(e) {
            return e.value < 4 ? "Less than 4 items" : "Items: " + e.value;
        }
    }
}
</script>
React
App.js
import React, { useCallback } from 'react';
import 'devextreme/dist/css/dx.light.css';

import DataGrid, {
    Summary,
    GroupItem
} from 'devextreme-react/data-grid';

export default function App() {
    const customizeText = useCallback((e) => {
        return e.value < 4 ? "Less than 4 items" : "Items: " + e.value;
    }, []);

    return (
        <DataGrid ... >
            <Summary>
                <GroupItem
                    column="OrderNumber"
                    summaryType="count"
                    customizeText={customizeText}
                />
            </Summary>
        </DataGrid>
    );
}
See Also