Last Updated: 20 Mar 2019 12:32 by ADMIN
Created on: 01 Mar 2019 17:09
Category: Kendo UI for Angular 2+
Type: Bug Report
Multiple grid column sorting

The manner in which the Kendo Grid handles multiple column sorting is unusual and therefore not what a user would expect.

I believe that people expect that the column they click on to always be the primary sort column.  In the Kendo grid, (when in multi-column mode) this is not the case.

If I click on the "Unit Price" column header, and then on "Product Name", nothing happens.  Instead, clicking on "Unit Price" a second time sorts the table by "Product Name".  This is not natural. 

Instead, this should simply behave like a non-destructive sort.  If I click on "Unit Price" and it sorts by that.  Then, clicking on "Product Name" should sort everything by Product Name and, if the names are the same, the items would be sub-sorted by the previously selected column: "Unit Price"

I would further ask that the only column that shows the arrow be the primary sort column.  Users want to see what the primary sort column is, and not be confused by the other columns, which they will assume are sorted in a reasonable way.  The indices help, but I still think that a single arrow denoting the primary sort column would be preferred.

To be backwards compatible, maybe introduce a 'natural' sort mode which would behave in this manner, since I really believe that this is what a user expect.

As a workaround, we put the grid in 'single' mode, and then when the sort changes, we do the following.  I limit the number of SortDescriptors to 3 as a compromise between sorting the columns in a reasonable way and yet prevent there from being too many arrows

public autoSortChange(sorts: SortDescriptor[]) {
   let singleSortKey = sorts[0];
   let newSort: SortDescriptor[] = [];
   newSort[0] = singleSortKey;
   this.internalSortDescriptors = this.internalSortDescriptors.filter(des => des.field !== singleSortKey.field)

   newSort = sorts.concat(this.internalSortDescriptors)

   this.internalSortDescriptors = Array.from(newSort);
   if (this.internalSortDescriptors.length > 2) {
    this.internalSortDescriptors.length = 2;
   this.gridState.sort = newSort;
   this.gridData = ...

Posted on: 20 Mar 2019 12:32
Hi Mark,

Thank you for the provided extensive feedback.

We had an internal discussion about this feature request, but decided not to proceed with its implementation. The grid's sorting functionality currently functions as designed.

We can achieve the desired multiple column sorting behavior by clearing or manually adjusting the default Sort Descriptors as discussed.   

Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Posted on: 13 Mar 2019 13:23

I agree that the behavior can be changed programmatically; which is what we did in our workaround.  I feel that this behavior would be a common request, and so I thought having a "mode" to provide this would be something appreciated by other Kendo licensees.  I am just trying to help.

I set "sortIndexes" to false earlier, but this makes it more confusing since, without the numbers, there are just arrows that are indistinguishable for each other.  As a user, I would find this even more frustrating since I could see that the grid was trying to tell me something, but it would always be ambiguous.  What, I think would be more helpful, would be to just show the arrow for the primary sort, since showing additional arrows just raises additional questions.

I have been a GUI designer for a long time and I understand the choices that you have made.  That being said, I have also realized in my experience that no one's job is to use the tools that I make.  People use the tools that I make to do their job.  Anything that I do that forces them to think about how to use the application or obscures information, shifts their focus from what they are actually trying to do.

When I went to the demo site, turned on multiple column sorting, and asked people to find the lowest cost product, they clicked the sort column, were confused, and immediately stopped trying to answer the question and were trying to figure out what just did or did not happen.

I am been very impressed by the Kendo component suite and appreciate all the thought and effort that went into it.  This is just one suggestion that I think would make it even better.


Posted on: 13 Mar 2019 12:14
Hi Mark,

Thank you for the additional details.

Indeed, at the moment if a user opens the example and sorts by the "Unit Price" column (when using multiple column sorting) the described behavior will occur due to the default sorting applied by the "Product Name" column. This happens because when changing the sortable mode the Grid keeps the applied SortDecriptors. But the developer can reset the applied sorting by removing the default SortDescriptor applied to the grid:

in app.component.ts:
export class AppComponent {
    public multiple = false;
    public allowUnsort = true;
    public sort: SortDescriptor[] = [{
      field: 'ProductName',
      dir: 'asc'

or by clearing the applied SortDescriptors each time the Grid sortable mode is changed to single or multiple as follows:
label class="k-form-field">
       <input class="k-checkbox" type="checkbox" id="multiple"
           [(ngModel)]="multiple" (change)="sort = []"
       <label class="k-checkbox-label" for="multiple">
         {{ multiple ? 'Disable': 'Enable' }} multiple columns sorting

About the indexes, by default they are displayed, but we can control their visibility by using the showIndexes property of the [sortable] input property of a multi column sort Grid:
         allowUnsort: allowUnsort,
         mode: multiple ? 'multiple' : 'single',
         showIndexes: false

Here is an example demonstrating the described approaches:

Let me know in case that makes sense or I am still missing something. Thank you in advance.

Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Posted on: 08 Mar 2019 14:37

I received a reply from Telerik supporting that the current behavior is correct, which makes me think I didn't lay out my scenario very well.

So, as a developer, let say I turn on multi-column sorting. (Since Chrome does not use a non-destructive sorting algorithm, the multi-column sort is necessary for us.)

(Setup: Click the button to enable multi-column sorting to simulate this being on by default.)

Now, say a user goes to that page, and the wants to sort by "Unit Price".  The first thing they would do is click on the "Unit Price" column.  They would expect the primary sort to be "Unit Price", but this does not happen.  ( Because there was a sort default already by "Product Name", but they didn't to this; that was just the default.)

This means that a user has to know and understand Kendo multi-column sorting and understand how it works.  (Since, if multi-column sorting is not on, the table would have been sorted by "Unit Price".)

If the multi-column sorting is ordered the other way, then multi-column sorting and single column sorting are compatible.    We would like to hide the fact that this is even on; since users don't want to have to think about these things.  (They have a job to do, and our application is to help them do their job; not give them more to think about.)

I actually tried this out on some others around here and, like me, their first response was confusion.  One person also specifically stated that he no idea what the numbers meant.  (I agree that these are not important to a user and should be hidden in multi column mode.)

I am not sure why a customer would request the grid to behave this way, but that is why I was requesting a different "mode".  This could maintain backwards compatibility, but I think would also be what most people would want. 

(I like the Kendo components, and this is just my suggestion on how I think they could be more useful.)


Posted on: 08 Mar 2019 12:35
Hi Mark,

Thank you for the provided extensive details about this feature request.

Considering the multiple columns sorting example from the referenced article, when we click the "Unit Price" column header, and then "Product Name" the grid is sorted first by "Unit Price" and then by "Product Name". We might not be able to see the actual rearrangement of the rows as they are properly ordered in the visible part of the grid. But if we set the height of the grid to 800 and perform the same sort we will see that the actual sorting is applied properly to the grid. More specifically the row with product name "Longlife Tofu" is moved before the row with product name "Sir Rodney's Scones". Indeed, this is the default behavior of a grid with multiple sorting enabled.

About the arrows and indexes of the sorted columns, this functionality was introduced based on the customers' demand.

Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.