Reusing RowTemplates

Anvil Q&A
3

Hi folks,

This is a great question. The reason you’re seeing this behaviour is because DataGrid columns all have auto-generated IDs behind the scenes, and these IDs are what cause components in RowTemplates to land in the right column. So, even though you have created several DataGrids with columns that look the same, the columns have different IDs. This means that the components in your RowTemplate will only fall into the right place in precisely one DataGrid.

There are two good workarounds for this. The first and simplest is to copy/paste the original DataGrid. This will give you a new DataGrid component with the same column IDs as the original, so the same RowTemplate will work there too - column IDs are only unique within a DataGrid, so there’s no harm in having two or more DataGrids with the same column IDs. This is solution I would recommend, and if it works for you then you can stop reading here!

The second approach is more involved, but will help in cases where you can’t copy/paste the original DataGrid. You’ll need to clone the app with git, find the .yaml file that describes the Form you’re editing, find the definition of the working DataGrid component, and copy its columns property. It will look something like this:

- type: DataGrid
  name: data_grid_1
  properties:
    columns:
    - {id: 'RDPCXR', title: 'A', data_key: 'column_1'}
    - {id: 'EEMRKO', title: 'B', data_key: 'column_2'}
    - {id: 'GFQLLS', title: 'C', data_key: 'column_3'}

There you can see the auto-generated column IDs. Now replace the columns property of the target data grid to be the same, and push your changes back to Anvil. Note that you can edit the columns in the designer as much as you like, and the multiple Data Grids will continue to work (so your columns can have different titles in different DataGrids, for example). Only adding or removing columns will cause IDs to change, and if this happens then you can fix them up in the yaml whenever you need to.

I hope that helps!

4 Likes