Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Show grid sort indicator when user-originated sorting is disabled
I have a case where I've disabled user-originated sorting on a Grid, and the Grid is instead sorted programmatically. This works fine, but the sort indicators are not shown for the columns that I'm sorting by, even though I'm sorting using Grid.sort(Sort sort). Is there any way to get around this? It would be a great help for the users to see the active sorting criteria, even when they can't modify it themselves.
Currently my sorting logic is in a SortListener instead of the container, as the sorting logic can be quite complex and the container can't really handle it. I've tried the following:
- Make the container return all of its columns when Sortable.getSortableContainerPropertyIds() is called, and then ignore the sort events in the SortListener if they are user-originated. This way the sort indicator is shown on the page when the Grid is sorted programmatically, but the user can click the headers and the sorting indicators are updated accordingly, even though the sorting order remains unchanged. This is really confusing to the user.
- Make the container return an empty list when Sortable.getSortableContainerPropertyIds() is called. If I do this, no sorting indicators are ever shown, even though the Grid would be sorted by one or more of its columns. This can also be confusing to the user.
- Same as #2, but also add the style "sort-asc"/"sort-desc" to the header cells that are sorted programmatically (using StaticCell.setStyleName(String styleName)). However, the styles never make it to the HTML element, but they're stripped at some point. I tried to add a couple different styles to the cells, and the "sort-asc"/"sort-desc" styles were always missing, while the others were present
The only thing that comes to my mind to try next is to duplicate the "sort-asc"/"sort-desc" CSS classes with different names and use option #3 from above and add the custom style names to the cells in order to show the indicators. But this feels really cumbersome, and I would also need to create a load of custom CSS classes. This is because when sorting by multiple columns, the sorting indicator is accompanied by the order number, and this number comes from the sort-order property in the element. This property doesn't seem to be present when user-originated sorting is disabled, so I'd have to add different CSS classes for the primary sort column, secondary sort column, etc.
I hope I'm just missing something here.