jQuery DataGrid - summary.totalItems
The total summary, which is located in the grid footer, provides a synopsis of all data contained in the grid. It contains several summary items. Each item displays a value that is a product of applying an aggregate function to the data of a specific column.
To specify the items of the total summary, declare an array of objects, each of which contains at least two fields: column and summaryType. The column field specifies the identifier of the column that provides data for an aggregate function. The summaryType specifies the aggregate function to be applied. The following code snippet shows how to declare two summary items.
jQuery
$(function () { $("#dataGridContainer").dxDataGrid({ // ... summary: { totalItems: [{ column: "Age", summaryType: "avg" }, { column: "LastName", summaryType: "count" }] } }); });
Angular
<dx-data-grid ... > <dxo-summary> <dxi-total-item column="Age" summaryType="avg"> </dxi-total-item> <dxi-total-item column="LastName" summaryType="count"> </dxi-total-item> </dxo-summary> </dx-data-grid>
import { DxDataGridModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxDataGridModule ], // ... })
By default, a summary item is placed in the column that provides data for it. If you need to place it in another column, assign the identifier of this column to the showInColumn option.
See Also
alignment
The default alignment of a summary item depends on the type of data that is held by the column that displays this item. The following table illustrates the dependency between the default alignment and the column data type.
dataType | alignment |
---|---|
'number' | 'right' |
'boolean' | 'center' |
'string' | 'left' |
'date' | 'left' |
'datetime' | 'left' |
'guid' | 'left' |
Use the HorizontalAlignment
enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Left
, Center
, and Right
.
See Also
column
To provide data for a summary item, assign the name, data field or caption of a column to this option. The summary item will be displayed in the corresponding column. If you require to place the summary item in another column, set the showInColumn option for this item.
See Also
cssClass
You can change the appearance of summary items using CSS styles. To apply a style to a summary item, implement a CSS class, which may contain various properties, and assign the name of this class to the cssClass option of the summary item.
customizeText
This option accepts a function that must return the text to be displayed in the summary item. When you implement this function, you can access the summary item value using the fields of object passed to the function as its argument.
See Also
displayFormat
When implementing the pattern, you can access the summary item value with applied format using position marker 0. If the summary item is placed in any other column rather than its parent one, you can also access the caption of the parent column using position marker 1. Place each of these position markers within curly brackets.
If your scenario requires more complex text customizations, utilize the customizeText option.
See Also
name
Specify this option if you need to refer to a summary item in your code afterwards, e.g., inside the calculateCustomSummary function.
showInColumn
By default, a summary item is placed in the column that provides data for it. If you require to place it in another column, assign the name, data field or caption of this column to the showInColumn option.
See Also
skipEmptyValues
Specifies whether or not to skip empty strings, null and undefined values when calculating a summary.
Specified in a summary configuration object, this option affects an individual summary item. If you need to apply a single setting to all summaries in a grid, specify the skipEmptyValues option in the summary object.
jQuery
$(function () { $("#dataGridContainer").dxDataGrid({ // ... summary: { // ... skipEmptyValues: false } }); });
Angular
<dx-data-grid ... > <dxo-summary [skipEmptyValues]="false"></dxo-summary> </dx-data-grid>
import { DxDataGridModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxDataGridModule ], // ... })
jQuery
$(function () { $("#dataGridContainer").dxDataGrid({ // ... summary: { totalItems: [{ summaryType: "custom", name: "customSummary1" }], calculateCustomSummary: function (options) { if (options.name == "customSummary1") { if (options.summaryProcess == "start") { options.totalValue = 0; } if (options.summaryProcess == "calculate") { if (e.value) { options.totalValue++; } } } } } }); });
Angular
<dx-data-grid ... > <dxo-summary [calculateCustomSummary]="calculateSummary"> <dxi-total-item summaryType="custom" name="customSummary1"> </dxi-total-item> </dxo-summary> </dx-data-grid>
import { DxDataGridModule } from "devextreme-angular"; // ... export class AppComponent { calculateSummary (options) { if (options.name == "customSummary1") { if (options.summaryProcess == "start") { options.totalValue = 0; } if (options.summaryProcess == "calculate") { if (e.value) { options.totalValue++; } } } }; } @NgModule({ imports: [ // ... DxDataGridModule ], // ... })
summaryType
The following summary types are supported:
"sum"
"min"
"max"
"avg"
"count"
"custom"
Applies a custom client-side aggregate function (calculateCustomSummary). Refer to Client-Side Data Aggregation for more information.Any other type
Applies a custom server-side aggregate function. Refer to Server-Side Data Aggregation for more information.
Use the SummaryType
enum to specify this option when the widget is used as an ASP.NET MVC Control. This enum accepts the following values: Sum
, Min
, Max
, Avg
, Count
, and Custom
. To apply a custom server-side aggregate function, use a string overload instead.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.