Free Trial Buy

Custom Aggregate Function

Client-Side Data Aggregation

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

Server-Side Data Aggregation

NOTE
This article applies to ASP.NET servers only.

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