Sorting inside group not working in Chrome

Thread is closed for posting
14 posts, 0 answers
  1. Igor
    Igor avatar
    18 posts
    Member since:
    Oct 2011

    Posted 22 Feb 2012 Link to this post

    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
  2. Jeff
    Jeff avatar
    2 posts
    Member since:
    Apr 2011

    Posted 22 Feb 2012 Link to this post

    Confirmed your sample app DOES have issues sorting in Chrome.
  3. Kendo UI is VS 2017 Ready
  4. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 23 Feb 2012 Link to this post

    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!
  5. Igor
    Igor avatar
    18 posts
    Member since:
    Oct 2011

    Posted 23 Feb 2012 Link to this post

    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
  6. Matt
    Matt avatar
    9 posts
    Member since:
    Mar 2012

    Posted 27 Mar 2012 Link to this post

    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
  7. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 28 Mar 2012 Link to this post

    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!
  8. Matt
    Matt avatar
    9 posts
    Member since:
    Mar 2012

    Posted 28 Mar 2012 Link to this post

    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
  9. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 29 Mar 2012 Link to this post

    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!
  10. Matt
    Matt avatar
    9 posts
    Member since:
    Mar 2012

    Posted 29 Mar 2012 Link to this post

    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
  11. Nathan
    Nathan avatar
    24 posts
    Member since:
    Sep 2009

    Posted 18 Apr 2013 Link to this post

    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!
  12. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 19 Apr 2013 Link to this post

    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!
  13. Nathan
    Nathan avatar
    24 posts
    Member since:
    Sep 2009

    Posted 19 Apr 2013 Link to this post

    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
  14. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 22 Apr 2013 Link to this post

    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!
  15. Nathan
    Nathan avatar
    24 posts
    Member since:
    Sep 2009

    Posted 22 Apr 2013 Link to this post

    Thanks for the response! Setting the sort explicitly on my datasource solved the issue for me even in Chrome now.

    Thanks again,

    Nathan
Back to Top
Kendo UI is VS 2017 Ready