Issues using: Grid / Grouping / Sort / Remote data

[Ryan]

We are implementing the Grouping feature in our grids and we've found some issues related to the Sorting while a grid is groupíng. We see also different behaviors at the demos between doing the binding to local data and remote data.

[NOTE: We are binding to remote data.]

The issues are the following: 

*** ISSUE 1: Grouping is not sorting by default
From the initial state of the grid, if we do a column grouping, the grouping is not applying the sort. The grid is grouping only the elements that we see at the page where are.

Repro steps:
1) Open the following Dojo from the Kendo UI demo of the remote data grid: http://dojo.telerik.com/uFeHo 
2) With the default state of the grid, pick the column of Ship City for grouping
3) See the elements of the group of Albuquerque (just one)
4) Sort by the Ship City column
5) See that the elements of the group of Albuquerque are more than one
6) See also that the first group is not Alburquerque, now it's Aachen

Expectation:
Please try the same using the demo of the local data grid: http://dojo.telerik.com/iRoLa

*** ISSUE 2: Grouping sort is ordering only the page where we are

Repro steps:
1) Open the following Dojo from the Kendo UI demo of the remote data grid: http://dojo.telerik.com/uFeHo 
2) With the default state of the grid, pick the column of Ship City for grouping
3) Press the chip of the grouping to change the grouping sort

Expectation:
Please try the same using the demo of the local data grid: http://dojo.telerik.com/iRoLa

*** ISSUE 3: Grid allows to apply column sort while the column is used for grouping

Repro steps:
1) Open the following Dojo from the Kendo UI demo of the remote data grid: http://dojo.telerik.com/uFeHo 
2) With the default state of the grid, pick the column of Ship City for grouping
3) Press the Ship City column header for sort

Expectation:
Please try the same using the demo of the local data grid: http://dojo.telerik.com/iRoLa

(!) IMPORTANT
Grouping is a required feature that is critical for us...
How expensive is a workaround to disable the sort of the grouping element and fix the default sorting when the grouping is used?

[Stefan]

Hello Joseph,

All of the described issues occur because the example is using server operations for paging and sorting, but not for grouping. When serverPaging has used the Grid will request the data only for the specific page, but as the grouping is made client side, it will be made only of the available items on the page, as it does not have all of the data available.

In this scenario I can suggest two approaches:

1) Enable serverGrouping as well. Please have in mind that this will require additional code on the server that will handle the request and return the grouped data in the expected format:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-serverGrouping

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.groups

2) To remove the other server operations and have all of them on the server. The Grid will still be with a remote data, but the operations will be done on the client(the Grid will request all of the data at once):

http://dojo.telerik.com/uFeHo/3

Please have in mind that we recommend all operations to be done either on the client or on the server as mixing them can lead to the described issues and more.

I hope this will help to achieve the desired result.

Regards,
Stefan
Telerik by Progress

[Ryan]

Thanks Stefan for your answer!

The approach that matches with what we need is the first one. I get that we have to set the serverGrouping as true, and the response, but could you pass me an example about how should be the entire response? 

I did the following and I couldn't make it work:

1) Set serverGrouping = true
2) Set the schema groups as a function
3) I'm returning an object like { Data: { groups: [(***)here's how's the tutorial says] }, Total: total items }

(***) The tutorial I mean the following: http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.groups
Where it says: "The result should have the following format:..."

Thanks a lot!

[Ryan]

Thanks Stefan for your answer!

From the two approaches you mentioned, the first one is the one that matches with what we need. We definitely need to do the grouping at the server because we do the paging, sort and filtering there too. 

I tried to apply it but I couldn't make it work. What I did was the following:

1) Set serverGrouping as true
2) Set schema groups as function
3) I'm doing a response like the tutorial says (http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.groups)

I think the problem is that I don't know exactly how must be the response. The response that I'm doing is like:

{ Data: { groups: [array of groups like the tutorial says] }, Total: TotalOfItems }

The errors I'm getting are the following:

TypeError: Cannot read property 'length' of undefined
    
at S (http://localhost:8181/atlas/Scripts/kendo/kendo.all.min.js:27:1209) 
at init.flatView (http://localhost:8181/atlas/Scripts/kendo/kendo.all.min.js:27:23755)
at init.dataItems (http://localhost:8181/atlas/Scripts/kendo/kendo.all.min.js:26:1282)
at init.dataItems (http://localhost:8181/atlas/Scripts/kendo/kendo.all.min.js:49:3011)
at AtlasDataTablePager.self.isDataTableEmpty (http://localhost:8181/atlas/App/directives/atlasdatatable/atlas.datatable.js:607:25)
at fn0 (eval at compile (http://localhost:8181/atlas/Scripts/angular.js:13322:15), <anonymous>:4:620)
at Object.expressionInputWatch [as get] (http://localhost:8181/atlas/Scripts/angular.js:14302:31)
at Scope.$digest (http://localhost:8181/atlas/Scripts/angular.js:15818:40)
at Scope.$apply (http://localhost:8181/atlas/Scripts/angular.js:16097:24)
at http://localhost:8181/atlas/Scripts/angular.js:17864:36 undefined

So my question is: How must be the exact response?

Thanks a lot!

[Ryan]

Thanks Stefan for your answer!

From the two approaches you mentioned, the first one is the one that matches with what we need. We definitely need to do the grouping at the server because we do the paging, sort and filtering there too. 

I tried to apply it but I couldn't make it work. What I did was the following:

1) Set serverGrouping as true
2) Set schema groups as function
3) I'm doing a response like the tutorial says (http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.groups)

I think the problem is that I don't know exactly how must be the response. The response that I'm doing is like:

{ Data: { groups: [array of groups like the tutorial says] }, Total: TotalOfItems }

The errors I'm getting are the following:

TypeError: Cannot read property 'length' of undefined
at S (http://localhost:8181/atlas/Scripts/kendo/kendo.all.min.js:27:1209)
at init.flatView (http://localhost:8181/atlas/Scripts/kendo/kendo.all.min.js:27:23755)
at init.dataItems (http://localhost:8181/atlas/Scripts/kendo/kendo.all.min.js:26:1282)
at init.dataItems (http://localhost:8181/atlas/Scripts/kendo/kendo.all.min.js:49:3011)
at AtlasDataTablePager.self.isDataTableEmpty (http://localhost:8181/atlas/App/directives/atlasdatatable/atlas.datatable.js:607:25)
at fn0 (eval at compile (http://localhost:8181/atlas/Scripts/angular.js:13322:15), <anonymous>:4:620)
at Object.expressionInputWatch [as get] (http://localhost:8181/atlas/Scripts/angular.js:14302:31)
at Scope.$digest (http://localhost:8181/atlas/Scripts/angular.js:15818:40)
at Scope.$apply (http://localhost:8181/atlas/Scripts/angular.js:16097:24)
at http://localhost:8181/atlas/Scripts/angular.js:17864:36 undefined

So my question is: How must be the exact response?

Thanks a lot!

[Stefan]

Hello Joseph,

I can suggest the following forum threads, as they contain examples of the expected response and also runnable samples:

http://www.telerik.com/forums/remote-binding-with-servergrouping-example

http://www.telerik.com/forums/grouping-and-aggregates-with-serverpaging-on-grid

I will link the expected JSON from the provided links:

 - The expected JSON based on the example in the thread. There is also attached runnable Visual Studio example:

http://pastebin.com/CPetyP5Y

- The second link also has a runnable example with the expected JSON:

http://jsfiddle.net/knWcJ/74/

Regards,
Stefan
Telerik by Progress