jQuery DataGrid - 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 property 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
       ],
       // ...
   })

   Vue

   App.vue

   <template>
       <DxDataGrid ... >
           <DxSummary>
               <DxTotalItem
                   name="сustomSummary1"
                   summary-type="custom"
               />
               <DxTotalItem
                   name="сustomSummary2"
                   summary-type="custom"
               />
           </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
                       name="сustomSummary1"
                       summaryType="custom"
                   />
                   <TotalItem
                       name="сustomSummary2"
                       summaryType="custom"
                   />
               </Summary>
           </DataGrid>
       );
   }

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 property 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 property:

   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
       ],
       // ...
   })

   Vue

   App.vue

   <template>
       <DxDataGrid ...
           :remote-operations="true">
           <DxSummary>
               <DxTotalItem
                   summary-type="totalSales"
               />
           </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 ...
               remoteOperations={true}>
               <Summary>
                   <TotalItem
                       summaryType="totalSales"
                   />
               </Summary>
           </DataGrid>
       );
   }

   ASP.NET MVC Controls

   Razor C#

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