Server-side grouping with Kendo UI grid : NotFetched exception when fetching subgroup data

[Wen Ren]

Hello,

I tried to achieve Server-side grouping function with Kendo UI grid. The grid is grouping by two groups. Below is the grid configuration:

$("#gridTableNew").kendoGrid({

            columns: [
                { title: "Recording ID", width: "120px", field: "recording_id" },
                { title: "Call Type", width: "150px", field: "is_enrollment_text" },
                { title: "Call Center", width: "150px", field: "call_center" },
                { title: "Call Time", width: "200px", field: "time_of_call_text" },
                { title: "Call Length", width: "140px", field: "length_of_call" },
                { title: "Customer Name", width: "180px", field: "customer_name" },
                { title: "Agent Name", width: "180px", field: "agent_name" }
            ],
            sortable: true,
            groupable: true,
            pageable: true,
            scrollable: {
                height: "450px"
            },
            dataSource: {
                transport: {
                    read: {
                        url: queryUrl,
                        type: "POST",
                        dataType: "json"
                    }
                },
                pageSize: 10,
                groupPaging: true,
                serverPaging: true,
                serverSorting: true,
                serverFiltering: true,
                serverGrouping: true,
                serverAggregates: true,
                group: [{
                    field: "customer_name",
                    dir: "asc"
                }, {
                    field: "agent_name",
                    dir: "asc"
                }],
                schema: {
                    data: "Data",
                    total: "Total",
                    groups: "Data",
                    errors: "errors"
                }
            }
        });

 

Below is the formated json data returned from server fetching the first grouping data, the grid display the data without any problem.

{"Total":2860,"Data":[{"hasSubgroups":false,"field":"customer_name","value":"A COLLEEN  WEINBERG","items":null,"subgroupCount":0,"itemCount":3,"aggregates":[]},{"hasSubgroups":false,"field":"customer_name","value":"ABBIGALE  WILLIAMS","items":null,"subgroupCount":0,"itemCount":2,"aggregates":[]},{"hasSubgroups":false,"field":"customer_name","value":"ABRAHAM J WHITEHEAD","items":null,"subgroupCount":0,"itemCount":2,"aggregates":[]},{"hasSubgroups":false,"field":"customer_name","value":"ACIE C JAMES","items":null,"subgroupCount":0,"itemCount":3,"aggregates":[]},{"hasSubgroups":false,"field":"customer_name","value":"ADA d GUYNN","items":null,"subgroupCount":0,"itemCount":2,"aggregates":[]},{"hasSubgroups":false,"field":"customer_name","value":"ADELE J WEBB","items":null,"subgroupCount":0,"itemCount":9,"aggregates":[]},{"hasSubgroups":false,"field":"customer_name","value":"ADELINE M THOMPSON","items":null,"subgroupCount":0,"itemCount":5,"aggregates":[]},{"hasSubgroups":false,"field":"customer_name","value":"ADELLE E MILLER","items":null,"subgroupCount":0,"itemCount":5,"aggregates":[]},{"hasSubgroups":false,"field":"customer_name","value":"ADMA M SEROUGI","items":null,"subgroupCount":0,"itemCount":2,"aggregates":[]},{"hasSubgroups":false,"field":"customer_name","value":"ADOLPHUS  COTTEN","items":null,"subgroupCount":0,"itemCount":1,"aggregates":[]}],"Tag":1,"Message":null,"Description":null}

 

Then I expanded one of the first group to fetch the second group data, the server return the same formated json data:

{"Total":1,"Data":[{"hasSubgroups":false,"field":"agent_name","value":"JACQUELINE TUCKER","items":null,"subgroupCount":0,"itemCount":3,"aggregates":[]}],"Tag":1,"Message":null,"Description":null}

 

But this time, the kendo grid throw this exception:

Uncaught TypeError: Cannot read properties of undefined (reading 'notFetched')
    at init._fetchGroupItems (kendo.all.min.js:28)
    at init._findGroupedRange (kendo.all.min.js:28)
    at init._findRange (kendo.all.min.js:29)
    at init.range (kendo.all.min.js:28)
    at kendo.all.min.js:28
    at Object.n.success (kendo.all.min.js:28)
    at fire (jquery.js?v=637714464013426646:3099)
    at Object.fireWith [as resolveWith] (jquery.js?v=637714464013426646:3211)
    at done (jquery.js?v=637714464013426646:8264)
    at XMLHttpRequest.<anonymous> (jquery.js?v=637714464013426646:8605)

 

What could be the problem? 

[Neli]

I am afraid that the provided information is not sufficient to suggest a possible reason for the observed issue. I used the provided configuration to prepare the Dojo example linked here. As you will see, the groups could be expanded without any issue. May I ask you to modify the linked sample in order to replicate the behavior the way it is on your side and send it back for a review? This way we could take a closer look and provide further assistance.

Regards,

Neli