I have a datagrid and I have a link in the data row and my bound components inside the link (to make the row clickable).
I can’t get the headings to line up with the data. Well, they do at design time but not at runtime.
Design time :
Runtime :
Nothing I do can make them line up.
I know what youre going to say
Ok, I forgot to drop a data row inside the link.
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 DataRowPanel
s. DataRowPanel
s 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, DataGrid
s and ColumnPanel
s 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:
-
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.
-
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:
2 Likes
@meredydd - yeah, just worked all that out
along with this link here - New Events For Forms
I was confusing myself. Cheers.
I should have known @shaun would have got there first