Sorting Grid Columns with some null values issue in Chrome

5 posts, 1 answers
  1. Lich
    Lich avatar
    6 posts
    Member since:
    Jul 2015

    Posted 10 Mar 2016 Link to this post

    Hi Telerik team,

    I have a grid with some columns have empty values. When i click sort on the empty values column, the grid still do the sort. It just happen only in Chrome.

    you can see the example here

    http://dojo.telerik.com/oYaTa/16  

     

    Thank you

  2. Lich
    Lich avatar
    6 posts
    Member since:
    Jul 2015

    Posted 10 Mar 2016 Link to this post

    In my grid, i just use single sort, so when i sort a column with all empty cell, the result should not be changed.

    I tried to change the type of field but not work. And this issue just occur in Chrome only

     

  3. Answer
    Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1266 posts

    Posted 12 Mar 2016 Link to this post

    Hello Lich,

    The described issue is a caused by the fact that the implementation of the built-in sorting algorithm in Google Chrome is not guaranteed to be stable. You can find a workaround in the following how-to article from our documentation:

    http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/stable-sort-chrome

    I have modified the provided dojo to implement the recommended approach:

    http://dojo.telerik.com/oYaTa/18

    Let me know if you need further assistance.

    Regards,
    Dimiter Topalov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  4. Lich
    Lich avatar
    6 posts
    Member since:
    Jul 2015

    Posted 14 Mar 2016 in reply to Dimiter Topalov Link to this post

    Hi Dimiter,

    Thank you for your solution. It work well and i just need to make some little change to fit my case.

    One more thing, how can i create a function and call it in sortable compare?

              function implStableSort(valA, valB,posA,posB, descending) {
                if (valA !== valB) {
                    return valA === valB ? 0 : (valA > valB) ? 1 : -1;
                }

                if (descending) {
                    return posB - posA;
                } else {
                    return posA - posB;
                }
            }

     

      $("#grid").kendoGrid({
      dataSource: dataSource,
      sortable: true,
      columns: 
        [
          {field: '_position',title: 'Position'},
        {field: 'name', title: 'Name'}, 
          {field: 'id', title: 'ID', sortable: {
                compare: function(a, b, descending) {
                  var valA = a.id;
                  var valB = b.id
                  if(valA !== valB)
                  {
                   return valA === valB ? 0 : (valA > valB) ? 1 : -1;
                  }

                  if (descending) {
                    return b._position - a._position;
                  } else {
                    return a._position - b._position;
                  }
                }
              }},
        {field: 'date', title: 'Date', sortable: {
                compare: function(a, b, descending) {
                                    var valA = a.date;
                                    var valB = b.date;
                  var posA = a._position;
                                    var posB = b._position;
    implStableSort(valA,valB,posA,posB,descending);
                }
              }}
        ]

    });

     

    Thank you

  5. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1266 posts

    Posted 16 Mar 2016 Link to this post

    Hello Lich,

    You can declare the function in a visible in the Grid's scope and use its name as value for the compare key in the sortable object:

    ...
    function implStableSort(...){
      ...
    }
    ...
    // Grid configuration
    ...
    {field: 'id', title: 'ID', sortable: {
                compare: implStableSort,
    ...

    I hope this helps.

    Regards,
    Dimiter Topalov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top