Add text boxes to DataGrid Columns programatically

Anvil Q&A
2

Hello and welcome,

You may find the documentation on DataGrids helpful.

If you want TextBox components inside the DataRowPanel so that the columns are consistent with the DataGrid, you could try this approach.

grid=DataGrid()
self.add_component(grid)

# create some columns
grid.columns = [
  { "id": "A", "title": "Name", "data_key": "name" },
  { "id": "B", "title": "Address", "data_key": "address" },
  { "id": "C", "title": "Age", "data_key": "age" }
]

# create some rows of data
items = [
{'name': 'Alice', 'address': '1 Road Street', 'age': "10"},
{'name': 'Bob', 'address': '2 City Town',  'age': "20"}
]
  
# extracting the column IDs
col_ids=[x["id"] for x in grid.columns]
  
# programatically align data and columns using TexBoxes and DataRowPanels
for item in items:
  drp = DataRowPanel()
  for ID, data in zip(col_ids, item.values()):
    drp.add_component(TextBox(text=data), column=ID)
    
  grid.add_component(drp)

sc
sc.png1362×296 4.99 KB

While this is totally doable, if each row contains the same set of elements, you may consider exploring RepeatingPanels and their use within DataGrids (see the docs above).

Lastly, I believe you are referring to DataGrid components rather than DataTables (Anvil’s built in database service). I’ve edited the title and post accordingly, but please feel free to correct it if I have misunderstood.

2 Likes