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.
https://www.telerik.com/kendo-angular-ui/components/grid/sorting/
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 = ...
}
