Kendo UI for Angular contains a Grid component which also supports sorting multiple columns.
The sample grid only contains 3 columns, and sorting by multiple columns does not have much effect, but this is only about the sorting behavior, not the data being sorted.
As you check the “Enable multiple columns sorting” box, you’ll notice a behavior that I find counter-intuitive:
- click on the Product Name column, and the grid is sorted by Product Name, showing 1 sort arrow
- click on the ID column, and the grid is sorted by Product Name and then ID, indicated by the column order next to the sort arrows (Product Name – 1, ID – 2)
- click on the Product Name column again, to reverse the sort order of the Product Name column.
What do you expect?
What the Kendo UI Grid does, it changes the order of columns so that the column clicked last ends up being the last in the order of columns.
My understanding is that the user wanted to change the direction of the sorted column (ascending vs. descending), and not change the order of the sorted columns.
Fortunately, the <kendo-grid> component provides a (sortChange) event, where you can implement your favorite sort behavior.
I created a multi-column sort sample on StackBlitz with my preferred sort behavior, the code can be viewed and forked here.
devioblog 