Server sorting + Client grouping messes up order in Chrome

[Dennis]

Hi,

I have a datasource which does server sorting on a "date" field, but client side grouping on a "showerId" field. This results in chrome in wrong inner ordering of the grouped data. It works fine in IE, FF, and Safari.

It also works fine if i do the sorting client side. Grouping server side is not an option for me.
I'm using Kendo version 2012.3.1315.

It's probably due to the fact that on line 2277 of kendo.data.js the sorting is not added to the options b/c serverSorting is enabled. However, for the grouped data to be sorted both need to be present on line 1242 where the sort is concatted to the grouping.

sort = normalizeGroup(group || []).concat(normalizeSort(options.sort || [])),

Is there any way you would consider always applying the sort if client side grouping is enabled?

Also, I'm nor sure why this does work in all browsers but Chrome. Maybe has to do with the internal sorting mechanics of the JS engine?

Thanks!

[Petur Subev]

Hello Dennis,

I do not recommend to implement the sorting and the gruoping on the different sides - server and client because these two operations are tightly coupled. And you might need to implement them either both on the server or enable them both on the client.

Basically in order for the grouping to work properly there should be sorting applied before that - sort by the column you group by.
Also in Chrome the sorting is not stable which caused inconsistent order when grouping. If you are using an older version of Kendo this might be the reason, however this is handled internally within the latest versions.

Kind Regards,
Petur Subev
the Telerik team

[Reuben]

I'm seeing the same problem when a list is grouped either in Chrome or on the Android platform.  I am returning a list of appointments from the server sorted by date and time.   The "group" field is a date in "Ymd" format and the grouping in a listview works as expected, however, the sort order within each group gets scrambled even though the server returned the results in order.  For example: appointments for 11pm show before appointments for 10am, etc.

On iOS this is not a problem.

This makes it impossible to use a listview with grouping since the item order within each group is critical.

Is there a workaround?

[Reuben]

This continues to be a problem in the latest release.

Server is returning the items in the desired order and are groupable by a key field. However, sub-group items are scrambled from the order they were returned by the server. Calendar - group by date - sort each group by time.

This is not a problem in iOS but Chrome and Android scramble the results.  Is there a workaround?

Here is a sample - http://jsfiddle.net/4K3V4/2/

Open it in Safari/iOS to see the expected behavior and Chrome/Android to see it get scrambled.

[Petur Subev]

Hello Dennis,

To keep the order of the items consistent you need to apply some sorting to the dataSource.

For example the following sorting will be consistent through the browsers.

http://jsfiddle.net/4K3V4/7/

sort:{
        field:"name",
        dir:"asc"
}

However keep in mind that sorting that will be applied is a string comparison.

Kind Regards,
Petur Subev
Telerik

[Andy]

It doesn't even seem like it is doing string based ordering.

I force my sort to match my grouping client side before the request is made (so that whatever is grouped is the first sorted columns).  However the order of items within groups are still random (string sorting or not).

I checked my returned items and they are in the order I want (first by group then by next column) however the 2nd columns order gets messed up by grouping.  (which is odd since I would have thought it would traverse the list as it was to group them client side and maintain the order I have.  This is obviously a use case since there are a number of people on this thread.

[Daniel]

Hello Andy,

Could you clarify what you mean by:
force my sort to match my grouping
If you are setting the sort option then could you provide a runnable sample that demonstrates the problem with the order?
As for preserving the order - this depends on the browser sorting algorithm. We have applied a workaround for the  unstable sorting in Chrome but it will be applied only for the sort field.

Regards,
Daniel
Telerik

 

 

[Steve]

Hi All,

I know this is a late entry, but I have the same issue recently.  In our project we used the following script to handle the grouping, filtering and sorting before passing the order of items to another page.

 var dataSource = $("#Grid").data("kendoGrid").dataSource;
        var filters = dataSource.filter();
        var groups = dataSource.group();
        var sortCriteria = dataSource.sort();
        var allData = dataSource.data();
        var query = new kendo.data.Query(allData);

 if (filters && groups.length > 0) {

            applyDataFilter = query.filter(filters).group(groups).data;

}.....

In the Attach files, the numbers were grouped by number and filtered on other column and "that is the order" we want to pass to another page. The first two group of numbers were fine, but in the third group, the numbers were not in their order of appearance. The problem seems to be with Google Chrome and we have to get it to work with Chrome (IE & FireFox are ok).  Any suggestions?

 TIA

 

[Vladimir Iliev]

Hello,

As Daniel mentioned by default Chrome browser use unstable sort algorithm - that why we implemented workaround which however requires the corresponding column to be sorted. Also please note that you should use one of the latest official releases of Kendo UI in order to take advantage of the workaround mentioned. 

If using the latest official release of Kendo UI and applying sort to the column does not fix the issue than please open new support ticket / forum post and provide runable example where the issue is reproduced. This would help us pinpoint the exact reason for this behavior. 

Regards,
Vladimir Iliev
Telerik