Remote Group Paging

Remote group paging helps to speed up grouping when there is a significant amount of data. Compared to grouping without paging, significantly less data is transmitted, because the DataGrid loads groups for the current page only. As a downside, requests become more frequent, because the DataGrid sends several of them each time a user expands a group or sorts/filters data.

Remote group paging has restrictions:

  • Filtering, paging, grouping, and sorting should be performed remotely.
  • Initially, all groups should be collapsed by setting the grouping | autoExpandAll option to false.
  • Do not call the expandAll(groupIndex) method. Otherwise, the widget ignores remote group paging.

Set the remoteOperations | groupPaging option to true to enable remote group paging. Note that with this setting, all other data processing operations (filtering, sorting, grouping, paging and summary calculation) also become remote.

$(function() {
        remoteOperations: {
            groupPaging: true

Now, the DataGrid requires server-implemented group paging. Use the following extensions for ASP.NET and PHP servers to implement group paging and other data processing operations:

See Also

For servers built on other technologies, implement all data processing operations by yourself and configure data access on the client side using the CustomStore as shown in the Custom Sources - Load Data topic, but mind the following changes in the result object's structure:

    data: [{
        key: "Group 1",
        count: 3,
        items: null,
        summary: [30, 20, 40]
    totalCount: 200,
    groupCount: 35, // added; count of top-level groups, if required in requireGroupCount
    summary: [170, 20, 20, 1020]

The groupCount should be returned only if the requireGroupCount Boolean parameter in the loadOptions is true. The following code is amended to query data from a server that supports remote group paging:

var gridDataSource = new{
    load: function (loadOptions) {
        var d = $.Deferred();
        $.getJSON('', {
            skip: loadOptions.skip,
            take: loadOptions.take,
            sort: loadOptions.sort,
            filter: loadOptions.filter,
            requireTotalCount: loadOptions.requireTotalCount,
            totalSummary: loadOptions.totalSummary,
            groupSummary: loadOptions.groupSummary,
            requireGroupCount: loadOptions.requireGroupCount // added
        }).done(function (result) {
                d.resolve(, { 
                    totalCount: result.totalCount,
                    summary: result.summary,
                    groupCount: result.groupCount // added
        return d.promise();

$(function() {
        dataSource: gridDataSource,
        // ...