Adding link to datagrid row programmatically

Anvil Q&A
#1

I think I might be going snow blind, but …
This works to create a datagrid with some rows :

dg = Datagrid()
dg.columns = [
      { "id": "0", "width":"100","title": "Name", "data_key":"name"},
      { "id": "1", "title": "Address", "data_key":"address"},
      { "id": "2", "title": "Number", "data_key":"number"},   
]
mydata=[
      {
        "name":"DAVE",
        "address":"Station House",
        "number":"447974"
      }
]
for i in mydata:
   row = DataRowPanel(item=i)
   dg.add_component(row)

And it shows this :

image
image.png1042×70 1.62 KB

But if I want to add a Link to the row (programmatically) to make it clickable :

for i in mydata:
   rowlink = Link()
   row = DataRowPanel(item=i)
   rowlink.add_component(row)
   dg.add_component(rowlink)

the first two columns are wrong but the third is ok :

image
image.png1191×83 3.45 KB

If I do all of this in the drag & drop IDE, then it all lines up fine.

1 Like
#2

Aha! This is because of the Anvil’s default limited-width page layout.

Link inherits from ColumnPanel, and a ColumnPanel limits the width of its components (by default) to something that’s moderately pleasant to read on a wide screen. You can turn this off by specifying full_width_row=True when you add the DataRowPanel to the Link:

rowlink.add_component(row, full_width_row=True)

Why didn’t I see this when I built my table in the drag’n’drop designer?

Well, when you used the designer, you were guided to drop your DataGrid into content_panel, which is a ColumnPanel - so the width was (by default) already limited! If you did self.content_panel.add_component(dg) rather than self.add_component(dg) you wouldn’t have seen this issue either.

What if I want my DataGrid to go super-wide?

Enable the full_width_row container property on your DataGrid, and any panels/links inside it. You can do this in the designer, from the Properties window, or from code by specifying add_component(..., full_width_row=True).

3 Likes