Vaadin Grid server-side pagination: data is sorted in backend , but not in UI

Flow
1

I’m using Vaadin (14) with server-side pagination and a custom data provider backed by JPA Criteria API.
I have done .setSortable(true) and user can click on the header to click on the sort arrow.
Previously, sorting was case-sensitive, and it was working fine.
But the user requested case-insensitive sorting. I updated my logic to use cb.lower(path) when sorting string fields:

if (String.class.equals(path.getJavaType())) {
   if (order.isAscending()) {
       orders.add(cb.asc(cb.lower(path)));
   } else {
       orders.add(cb.desc(cb.lower(path)));
   }
} else {
   if (order.isAscending()) {
       orders.add(cb.asc(path));
   } else {
       orders.add(cb.desc(path));
   }
}

The order looks coorect when I check the resultList, they are in the right order

image
image1317×243 103 KB

but in the UI, the rows no longer appear in the same order as the backend’s sorted result. It did sort but it is case sensitive

Any anyone how to resolve this? Or is there a better way to implement the sort with ignoreCase?

2

Just a guess… haven’t touched V14 in ages.

Your custom DataProvider might not be recognized as “lazy loading” data provider, therefore Vaadin’s default sorting is applied on the returning list… not sure how to verify, but this might get you a good starting point to search for

1 Like
3

If that’s the case, then it could be resolved by overriding the isInMemory method to return false since that’s what the grid looks at to determine how to sort.

1 Like
4

My custom data provider extends this one : Spring Data Provider Add-on - Vaadin Add-on Directory

Are you able to tell if that would be lazy loading issue you mentioned?

5

Can you show us your column config? Did some googl’ing and found some old issues about e.g. missing col.setSortProperty

6 
    customerCodeColumn = tableGrid.addColumn(XXX::getCustomerCode)
        .setKey("customerCode")
        .setHeader("Customer Code")
        .setSortable(true)
        .setWidth("100px")
        .setAutoWidth(true)

Would this be enough?

I am not calling setSortProperty, did not know I need to include it?

7

From what I understand: without it, it has never given the sorted columns to your backend and is using his own sorting.

Another hack might be to overwrite setComparator on the columns with (o1, o2) → 0

1 Like
8

OMG, this solved my issue.
setComparator on the columns with (o1, o2) → 0

I got stuck on this issue for few days
Thank you very much!

9

That’s really just a workaround/hack… proper solution is to use the sort property on the column :sweat_smile:

10

I did try to use the setSortProperty, but somehow it does not work for me

11

I believe sort properties are used for lazy-loading dataproviders (it’s set in the Query object which you use to put together your backend database query) whereas Comparators are used for in-memory dataproviders (they can compare Java objects, so everything must be loaded into memory for them to work properly)

1 Like