Sorting Grid Columns with some null values issue in Chrome

[Lich]

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

[Lich]

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

 

[Dimiter Topalov]

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

[Lich]

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

[Dimiter Topalov]

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