This is a migrated thread and some comments may be shown as answers.

Sorting inside group not working in Chrome

13 Answers 409 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Igor
Top achievements
Rank 1
Igor asked on 22 Feb 2012, 10:35 PM
Hi,

I have a problem with KendoUI Grid when I group and sort - items are not sorted properly. Here is a demo: http://jsfiddle.net/7Dbkz/1/ 

If I use IE everything works as expected, but it doesn't work in Chrome. I have been told there is an issue with Chrome when it comes to Array.sort implementation (http://code.google.com/p/v8/issues/detail?id=90). Is there a workaround for this issue? If there isn't a solution, grouping is useless in Chrome.

Thanks,

Igor

13 Answers, 1 is accepted

Sort by
0
Jeff
Top achievements
Rank 1
answered on 23 Feb 2012, 12:30 AM
Confirmed your sample app DOES have issues sorting in Chrome.
0
Rosen
Telerik team
answered on 23 Feb 2012, 12:14 PM
Hi Igor,

As we already reply to your question, the described behavior is caused by the fact that Chrome Array.sort implementation is not stable. Unfortunately, implementing custom sort is not an option as it will be way too slow compared to the browser's implementation. In order to workaround this you may consider enabling paging and use max page size of 10, as in this case the sort method seems to be stable. Here is an updated version of the test jsFiddle page.

Regards,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Igor
Top achievements
Rank 1
answered on 23 Feb 2012, 12:38 PM
Hi Rosen,

thanks for replaying to my support ticket but I was hoping that someone from community would know how to solve this problem.

Setting page size to 10 is not an option because I am using grouping and sorting for large amount of data. It seems that grouping is useless in Chrome.

Thanks anyway.

Igor
0
Matt
Top achievements
Rank 1
answered on 27 Mar 2012, 05:33 PM
Hi there,

I've setup my project to do server sorting and even though the data is coming back sorted correctly the grid is re-sorting it incorrectly in chrome.  Is there any way I can just have it not re-sort?  I see there is a serverGrouping option on the grid but can't find what that means or how I would use it.  Using a pageSize < 10 is not an option for me.  Is there any other way I can get this working in Chrome?

Just in case it helps, here's my current DataSource setup:
            dataSource: {
                transport: transport
                , schema: { model: schema, data: "results", total: "totalItems" }
                , pageSize: 20
                , serverPaging: true
                , serverFiltering: true
                , serverSorting: true
                , serverAggregates: true
                , group: groups
                , aggregate: aggregates
            },

Thanks,
Matt
0
Rosen
Telerik team
answered on 28 Mar 2012, 07:33 AM
Hi Matt,

The grouping should work as expected in Chrome with the official Q1 2012 KendoUI release as we have added a workaround for the stable sort issue.

However, as you are using server paging, sorting etc. you should handle the grouping also on the server in order to get correct results. Note that in this case you will need to specify where the grouped data is located within the response. This should be done through DataSource schema groups setting. The grouped data returned from the server should be in the following format:

[{
  "field":"FirstName", // field by which data records are grouped
  "value":"Andrew", // value of the groupby field
  "items": [ /*data records or nested groups goes here*/],
  "hasSubgroups":false, // true if there are nested groups
  "aggregates":{}
},
{
  "field":"FirstName",
  "value":"Scott",
  "items": [ /*data records or nested groups goes here*/],
  "hasSubgroups":false,
  "aggregates":{}
},
/*...*/
]

Greetings,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Matt
Top achievements
Rank 1
answered on 28 Mar 2012, 09:25 PM
Hi Rosen,

Thanks for the response but now I can't seem to get the server grouping right.  When I turn that on I always get an empty grid. 

My DataSource definition looks like this:
var dataSource = new kendo.data.DataSource({
    transport: transport,
    schema: { model: schema, total: "totalItems", group: "groups", data: "results" },
    pageSize: 20,
    serverPaging: true,
    serverFiltering: true,
    serverSorting: true,
    serverAggregates: true,
    serverGrouping: true,
    group: groups,
    aggregate: aggregates
});

and my transport returns this:
{
  "results": [
    {
      "TestContacts_ID": "27",
      "TestContacts_CompanyName": "MC 1"
    },
    {
      "TestContacts_ID": "26",
      "TestContacts_CompanyName": "MC 1"
    },
    {
      "TestContacts_ID": "25",
      "TestContacts_CompanyName": "MC 1"
    },
    {
      "TestContacts_ID": "29",
      "TestContacts_CompanyName": "MC 2"
    },
    {
      "TestContacts_ID": "28",
      "TestContacts_CompanyName": "MC 2"
    }
  ],
  "totalItems": 5,
  "groups": [
    {
      "aggregates": {},
      "field": "TestContacts_CompanyName",
      "value": "MC 1",
      "items": [
        {
          "TestContacts_ID": "27",
          "TestContacts_CompanyName": "MC 1"
        },
        {
          "TestContacts_ID": "26",
          "TestContacts_CompanyName": "MC 1"
        },
        {
          "TestContacts_ID": "25",
          "TestContacts_CompanyName": "MC 1"
        }
      ],
      "hasSubgroups": false
    },
    {
      "aggregates": {},
      "field": "TestContacts_CompanyName",
      "value": "MC 2",
      "items": [
        {
          "TestContacts_ID": "29",
          "TestContacts_CompanyName": "MC 2"
        },
        {
          "TestContacts_ID": "28",
          "TestContacts_CompanyName": "MC 2"
        }
      ],
      "hasSubgroups": false
    }
  ]
}
 
Does anything look wrong there?  Also, how would this data need to look if I did have subgroups?

Thanks,
Matt
0
Rosen
Telerik team
answered on 29 Mar 2012, 07:12 AM
Hi Matt,

I suspect that the grid is not filled in with data as the schema setting is groups not group. Could you please change it and see it this makes any difference.

Regarding the nested groups format. In this case the items field should contain the nested group items (in the same format as described before) and have the hasSubgroups field set to true.

Regards,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Matt
Top achievements
Rank 1
answered on 29 Mar 2012, 04:49 PM
I had tried that already, but on retrying it this time I noticed something else.  Using the groups property I noticed that I get an error:
Uncaught ReferenceError: TestContacts_FirstName is not defined

Looks like this is a remnant of a previous test that was coming across in my model for the schema.  Fixing the model and using the groups property seems to have done the trick.

Just for future reference my schema now looks like this with serverGrouping on:
schema: { model: schema, groups: "groups", data: "results", total: "totalItems" },

Thanks!
Matt
0
Nathan
Top achievements
Rank 2
answered on 18 Apr 2013, 03:51 PM
Sorry to resurrect an old thread but I have this same issue using the latest 2013 Q1 release of kendo.web.min

The sort is broken only on the very first grouping when running in Chrome. IE works fine.

Did anyone find a work around for this in Chrome browsers?

Thanks!
0
Atanas Korchev
Telerik team
answered on 19 Apr 2013, 09:22 AM
Hello,

 This issue has been fixed long ago. Can you provide some code which shows how to reproduce it? Does in happen in the kendo ui online demos?

Kind regards,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Nathan
Top achievements
Rank 2
answered on 19 Apr 2013, 06:46 PM
Hi Atanas,

Thanks for the response. Here I tried to mimic what I'm doing without all the web service calls. It shows similar behavior.

http://jsfiddle.net/atx6K/

Please note that I copied the kendo resource from another jsfiddle example that looks to be an old version (http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js)

Please let me know what the correct current link should be but rest assured I am using the latest Q1 release in my project.

Thanks!

Nathan
0
Rosen
Telerik team
answered on 22 Apr 2013, 08:49 AM
Hello Nathan,

I have looked at the sample you have provided and it works as expected - the groups are sorted as expected. However, note that there is no guarantee that the items in the groups will be in the same order as they appear in the original data set. If you want to persist a specific order you should explicitly set a sort descriptor on the field which they should be ordered by.

All the best,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Nathan
Top achievements
Rank 2
answered on 22 Apr 2013, 02:34 PM
Thanks for the response! Setting the sort explicitly on my datasource solved the issue for me even in Chrome now.

Thanks again,

Nathan
Tags
Grid
Asked by
Igor
Top achievements
Rank 1
Answers by
Jeff
Top achievements
Rank 1
Rosen
Telerik team
Igor
Top achievements
Rank 1
Matt
Top achievements
Rank 1
Nathan
Top achievements
Rank 2
Atanas Korchev
Telerik team
Share this question
or