How to use filter with PagingGrid ?

[rucko24]

Hello,

This PagingGrid looks quite nice and useful, is it possible to add a typical textfield filter as in the vaadin doc ? where is that TextField used with a GridListDataView ?

---

When I use the paginate button, the filter is kind of lost.

            this.grid.setPagingDataProvider((page, pageSize) -> {
                // This is demo specific line, normally, e.g. with spring data, page number is
                // enough
                int start = (int) (page * this.grid.getPageSize());
                // Optional, sorting
//            if (!this.grid.getSortOrder().isEmpty()) {
//                GridSortOrder<HexDumpDto> sortOrder = this.grid.getSortOrder().get(0);
//                String propertyId = sortOrder.getSorted().getKey();
//                boolean asc = sortOrder.getDirection() == SortDirection.ASCENDING;
//                return this.hexDumpServiceImpl.findAll(PageRequest.of(0,10));
//            }
                return this.hexDumpServiceImpl.findAll(PageRequest.of(start,10));
            });

            this.gridListDataView = this.grid.setItems(this.hexDumpServiceImpl.findAll());

        this.searchTextField.addValueChangeListener(valueChangeEvent -> this.gridListDataView.refreshAll());

[mstahv]

The PagingGrid should probably somehow call the provider again if refreshAll in data view is called. But generally, I think you are "holding it wrong" if you need to call that method (with any kind of Vaadin Grid). I have had better results usually by creating a "list" method to the view/grid that lists data from the backend based on current state of the view.

I re-wrote the example to use this kind of approach (and some sub-classes to make code look better). While plaing with it, I also noticed a bug in the PaginGrid that the button states are not reset when the "data is reset", new version in Maven central now and the demo uses that version.

Let me know what you think or if we should look into finding a way to make "refreshAll" work as well.

[rucko24]

Thank you,

In the change you have deployed, it works perfect, I will adapt to what you have and that's it, I trust your recommendations...

[rucko24]

Good evening @mstahv ,

Something seems strange to me. If I search for the word “First9,” for example, and paginate, it clearly does so, but when I delete the text field, the pages are no longer fully visible.

Initially, there are more than 30 pages.

bug-pagination.webm

---

After the previous video, if we use the size definition buttons, the pages are reset.

boton-define-size-to.webm

---

I think that here, the bug is much more visible. Could that be it?

more-visible-no-pages.webm

protected void preparePaginationBar() {
    if (paginationBar == null) { (1)
        paginationBar = new PaginationBar(null);
    }
    if(getColumns().isEmpty()) {
        // no columns yet, we'll add the pagination bar later
        return;
    }
...

(1) I get the feeling that when we clear the text field, according to debug mode, the bar is not re-instantiated because it is not null.

If the page is not null, but there is only one page out of 15, isn't it better to display them all at once? Or rather, instantiate the PaginationBar?

---

Well, ugly, but works at the moment 🤔

    protected void preparePaginationBar() {
        if (paginationBar == null) {
            paginationBar = new PaginationBar(null);
        }
        if(paginationBar.pages != null && (paginationBar.pages >= 1 && paginationBar.pages < paginationBar.size) ) {
            paginationBar = new PaginationBar(null);
        }

[mstahv]

setPagingProvider should reset the cached size 🤔

[mstahv]

The f16355d probably fixes this, I assume you are still on 24.x series? Need to backport at some point.

[rucko24]

The f16355d probably fixes this, I assume you are still on 24.x series? Need to backport at some point.

Hi @mstahv how are you ?

I am using the

<dependency>
    <groupId>in.virit</groupId>
    <artifactId>viritin</artifactId>
    <version>2.21.1</version>
</dependency>

And vaadin 24.9.0

---

I have seen your changes to Viritin 3.0.0 but for Vaadin 25, at the moment I believe that with Vaadin 24.9.0 the new changes are not there, right?

https://github.com/viritin/flow-viritin/blob/v24/src/main/java/org/vaadin/firitin/components/grid/PagingGrid.java#L92

---

Well, I did what the guy did, I copied the PaginGrid, but I see that the issue persists.

Everything copied in Vaadin 24.

It's still very dirty, but it keeps working, preparePaginationBar() from 25 vaadin version

protected void preparePaginationBar() {
        if (this.paginationBar == null) {
            this.paginationBar = new PaginationBar((Long)null);
        }

        if(paginationBar.pages != null && (paginationBar.pages >= 1 && paginationBar.pages < paginationBar.size) ) {
            paginationBar = new PaginationBar(null);
        }

        if (!this.getColumns().isEmpty()) {
            if (this.paginationBarMode == PagingGridv2.PaginationBarMode.BOTH) {
                this.addToHeader();
                this.secondaryBar = new PaginationBar(this.paginationBar.size);
                this.secondaryBar.currentPage = this.paginationBar.currentPage;
                this.secondaryBar.updateState();
                this.addToFooter();
            } else {
                if (this.secondaryBar != null) {
                    try {
                        this.secondaryBar.removeFromParent();
                    } catch (Exception e) {
                        e.printStackTrace();
                    }

                    this.secondaryBar = null;
                }

                if (this.paginationBarMode == PagingGridv2.PaginationBarMode.TOP) {
                    this.addToHeader();
                } else if (this.paginationBarMode == PagingGridv2.PaginationBarMode.BOTTOM) {
                    this.addToFooter();
                }
            }

        }
    }

[mstahv]

Try with 2.21.3 (for 24.x series). Cleared another field as well, my "blind fix" worked only if one was not on the first page. Updated the demo app as well.

[rucko24]

Try with 2.21.3 (for 24.x series). Cleared another field as well, my "blind fix" worked only if one was not on the first page. Updated the demo app as well.

Hi @mstahv ,

• Well, now the filter is working fine, but the paginationBar isn't updating correctly?

Grabacion.de.pantalla.desde.2025-12-15.08-33-51.webm

Grabacion.de.pantalla.desde.2025-12-15.08-36-20.webm

[mstahv]

Ah, the "status text" is now missing once filtering reset? If you are discribing the bug only as a video, it would be helpful if you could somehow show the user iterractions in the video. Many screen recording software allows you to for example show clicks.

We'd really need E2E tests for this component (and that pending refactoring...).

[mstahv]

This hopefully fixes it: viritin/flow-viritin@a196d1b