DevExtreme jQuery - Custom Aggregate Function

Follow the steps below to configure custom client-side data aggregation.

1. Make sure that the remoteOperations.summary, remoteOperations.groupPaging, or remoteOperations option is not set or set to false.

2. Add one or several summary items to the totalItems or groupItems array. Specify their names and set summary types to "custom":

   jQuery

   JavaScript

   $(function() {
       $("#dataGridContainer").dxDataGrid({
           // ...
           summary: {
               totalItems: [
                   { name: "сustomSummary1", summaryType: "custom" },
                   { name: "сustomSummary2", summaryType: "custom" }
               ]
           }
       });
   });

   Angular

   HTML

   TypeScript

   <dx-data-grid ... >
       <dxo-summary>
           <dxi-total-item
               name="сustomSummary1"
               summaryType="custom">
           </dxi-total-item>
           <dxi-total-item
               name="сustomSummary2"
               summaryType="custom">
           </dxi-total-item>
       </dxo-summary>
   </dx-data-grid>

   import { DxDataGridModule } from "devextreme-angular";
   // ...
   export class AppComponent {
       // ...
   }
   @NgModule({
       imports: [
           // ...
           DxDataGridModule
       ],
       // ...
   })

3. Implement the calculateCustomSummary function as detailed in its description.

View Demo

See Also

• Format Text and Value

Follow the instructions below to implement custom server-side data aggregation. This implementation requires the DevExtreme.AspNet.Data library.

1. Set the remoteOperations.summary, remoteOperations.groupPaging, or remoteOperations option to true.

2. Implement and register a custom server-side data aggregator using DevExtreme.AspNet.Data as described in this article.

3. Pass the string identifier you used to register the aggregator to a summary item's summaryType option:

   ASP.NET MVC Controls

   Razor C#

   @(Html.DevExtreme().DataGrid()
       .RemoteOperations(true)
       .Summary(s => s
           .TotalItems(i => {
               i.Add().SummaryType("totalSales");
           })
       )
   )

   jQuery

   JavaScript

   $(function() {
       $("#dataGridContainer").dxDataGrid({
           remoteOperations: true,
           summary: {
               totalItems: [
                   { summaryType: "totalSales" }
               ]
           }
       });
   });

   Angular

   HTML

   TypeScript

   <dx-data-grid ...
       [remoteOperations]="true">            
       <dxo-summary>
           <dxi-total-item summaryType="totalSales"></dxi-total-item>
       </dxo-summary>
   </dx-data-grid>

   import { DxDataGridModule } from "devextreme-angular";
   // ...
   export class AppComponent {
       // ...
   }
   @NgModule({
       imports: [
           // ...
           DxDataGridModule
       ],
       // ...
   })