React DataGrid - 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 ], // ... })
Specify the customizeText function for a more detailed customization.
jQuery
JavaScript
$(function () { $("#dataGridContainer").dxDataGrid({ // ... summary: { groupItems: [{ column: "OrderNumber", summaryType: "count", customizeText: function (e) { if (e.value < 4) { return "Less than 4 items" } return "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) { if (e.value < 4) { return "Less than 4 items" } return "Items: " + e.value; }; } @NgModule({ imports: [ // ... DxDataGridModule ], // ... })
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.