Dynamic pagination for gridView

[travis_s]

I’m building an image review process. This process is using the gridView to display as many images on a page as possible.

I’d like to be able to set “items per page” automatically to fill the entire gridView.

[travis_s]

It would also be nice if I could have the gridView fill all the available vertical space. I can already have it fill all horizontal space.

[Max]

Hi @travis_s,

Regarding the “items per page”, filling the entire gridView not only depends on that setting, but also on the size of the component. Just know that if you make the component fill the available vertical and horizontal space, but you only have for example 5 items, it might not fill the entire gridView:

But the most straightforward thing would be to simply set the “items per page” to the count of the data you have. When the amount changes, execute an action that updates the “items per page” like {{ ui.gridView.setPageSize(state.gridData.length) }}.

And the first thing that comes to my mind to fill all the vertical space, assuming you also want it to fill space even though it doesn’t need it, is to use a Container component with the Expand content to fit setting:

Though, the container also needs a height, so if that doesn’t work out for you, we might come up with a different solution.