Pagination not working in data grid

Anvil Q&A
1

Hi everyone

I have a data grid called ngram_grid.

The grid needs to use pagination, but this is not working - in the image below, the pagination is switched on and rows_per_page is set to 10 but no page-changing options are available.

image
image721×796 28.4 KB

This sems to be the case regardless of changes I make to the obvious settings.

image
image914×438 20 KB

When I print the rows_per_page value, it shows as the value I input in the IDE:

print(self.ngram_grid.rows_per_page)
answer: 5

But this does not reflect when the grid is populated. There is no pagination.

The data grid’s rows need to be populated directly from a list of dictionaries like the one below, which has a variable length each time:

[{'Keywords': 'mauritius', 'Volume': 253}, {'Keywords': 'in mauritius', 'Volume': 19}, {'Keywords': 'to mauritius', 'Volume': 16}, {'Keywords': 'hotels', 'Volume': 13}, {'Keywords': 'resort', 'Volume': 13}, {'Keywords': 'le', 'Volume': 12}, {'Keywords': 'port', 'Volume': 8}, {'Keywords': 'beach', 'Volume': 8}, {'Keywords': 'morne', 'Volume': 7}, {'Keywords': 'le morne', 'Volume': 7}, {'Keywords': 'hotels in', 'Volume': 7}, {'Keywords': 'louis', 'Volume': 6}, {'Keywords': 'holidays', 'Volume': 6}, {'Keywords': 'packages', 'Volume': 6}, {'Keywords': 'grand', 'Volume': 6}, {'Keywords': 'port louis', 'Volume': 6}, {'Keywords': 'resort mauritius', 'Volume': 6}, {'Keywords': 'rodrigues', 'Volume': 5}, {'Keywords': 'lux', 'Volume': 5}, {'Keywords': 'india', 'Volume': 5}]

Here’s a basic clone with the data grid at the bottom: Anvil | Login

Can anyone suggest what might be going wrong here?

Thanks,

Richard

2

When working with a DataGrid panel it’s important to use a DataRowPanel as the item template for the RepeatingPanel. A DataGrid, RepeatingPanel and DataRowPanel work together to do pagination.

In the clone, you’ve used a BlankPanel or a ColumnPanel as the item template. The problem there is that a column panel doesn’t know how to work with a data grid and so the repeating panel doesn’t think it has any rows.

Adding a new repeating panel to the datagrid will get you the correct row template.

The structure diagram in the docs shows the typical layout for a DataGrid component.

2 Likes
3

Thanks, great to see where I went wrong.

I created the rows using a BlankPanel because when I double-clicked on the repeating panel when it was first created in the data grid, the white area intended to guide users on where to drop components was misaligned with the row panel (this happens only in my full app with all the containers with various visibility statuses, not in the stripped-down clone I provided). When I tried to drag components into the white area, I got the red crossbar.

image
image697×811 34.2 KB

I’ve played about with it and figured out how I can drop components in there now (ignore the white and dark and drop them directly into the row panel), just was thrown by the ‘guide screen’.

Edit: This seems to have been caused by the data grid being quite a long way down in a long app, or columnised next to another component. When I moved the grid to be the first element at the top of the app and made it span the ‘ful’ width of the app (tremporarily), it made the guide screen align correctly with the row panel.