CODEWITHSUNDEEP
vaadinvaadin-flowvaadin-gridvaadin23
Sankalp Bhatt
Sankalp Bhatt

Reputation: 81

How to sort Grid columns in Vaadin 23

We migrated from vaadin 8 to 23 and had to change the class com.vaadin.ui.Grid to com.vaadin.flow.component.grid.Grid.

Implementation changed for column sorting.

I added column using below code and expected Grid sorting to work. I see the sort icons but the list is not sorting.

addColumn(Class::getName)
    .setSortable(true)
    .setHeader("Column Name")
    .setId("name-column-name");

Explicitly specified the sortable flag as default value is false.

However, on debugging I found that the payload

{
            "type": "publishedEventHandler",
            "node": 7,
            "templateEventMethodName": "sortersChanged",
            "templateEventMethodArgs": [
                [
                    {
                        "path": "col0",
                        "direction": "desc"
                    }
                ]
            ],
            "promise": 4
        }

On Debuging through the vaadin classes, I found that the method hasListener below is returning a false.

public boolean hasListener(Class<? extends ComponentEvent> eventType) {
        if (eventType == null) {
            throw new IllegalArgumentException("Event type cannot be null");
        }
        return componentEventData.containsKey(eventType);
    }

The event name which is triggered is class com.vaadin.flow.data.event.SortEvent However list had following events

class com.vaadin.flow.data.selection.SingleSelectionEvent
class com.vaadin.flow.component.grid.dnd.GridDragStartEvent
class com.vaadin.flow.component.grid.dnd.GridDragEndEvent

I think this is the reason why my grid is not sorting. Anyone who can help here?

Upvotes: 0

Views: 1367

Answers (1)

ollitietavainen
ollitietavainen

Reputation: 4290

Based on your comment, you're using a lazy-loading DataProvider for the Grid. In that case, you need to set up a sort property in your columns:

grid.addColumn(...).setSortable(true).setSortProperty("sort-property");

The set of sort properties will be available from the Query object in the DataProvider and it's up to the DataProvider implementation and the backend service to sort the data based on each property and sort direction (ascending / descending).

More information and examples in the docs: https://vaadin.com/docs/latest/binding-data/data-provider#data-binding.data-provider.lazy-sorting

Upvotes: 0

Related Questions