Datagrids - lining up headings & data

Anvil Q&A
3

Ah - I think we have a confusion between types of containers here! Rows in DataGrids (including the row templates Anvil creates for you) should be DataRowPanels. DataRowPanels lay out their components in columns, as specified by the enclosing DataGrid.

A Link, by contrast, acts like a ColumnPanel. If you put components inside a Link, they will be laid out in elastic columns, the columns will wrap responsively on smaller screens, etc. In general, DataGrids and ColumnPanels expand differently as the page gets wider. So even if you can get them to match up in the specific screen width of your designer, they probably won’t work when the Toolbox goes away – let alone full screen on someone else’s computer.

If you want to make a whole row clickable, you should instead put a DataRowPanel inside your Link, then put your content in the column slots inside the DataRowPanel. The DataRowPanel will pick up the column widths from the enclosing DataGrid and line its contents up with the rest of the table.

Extra tips when doing this:

  1. You may wish to set the spacing_above and spacing_below properties of the Link container to None, so you don’t accumulate vertical padding.

  2. You’ve probably unchecked auto_display_data in your row template so that everything is displayed inside the Link. If you want to auto-display data on the inner DataRowPanel, you can do that with a data binding - just bind data_row_panel_1's item property to self.item from the row-template:
    image

2 Likes