Reusing RowTemplates

Anvil Q&A
1

I have a situation where I’m going to have quite a few data grids that all basically hold different flavors of the same information (i.e. same columns, different data).

So I figured I could create a single RowTemplate and use that in each of my datagrids, setting the appropriate .items for each.

However it seems like whenever I set the RowTemplate to a datagrid other than the original datagrid it was created as a part of, it loses the fact that there are columns, and all my row template components end up in the first column. Here’s an example to show what I mean:

https://anvil.works/build#clone:APEVX54FPPN7HEHX=UVX4P24LXROAFTBST43WJQSJ

I’ve tried to find any settings or properties that might be different across these data grids and they look identical - so why do they behave so differently with the RowTemplate? Similarly there doesn’t seem to be any properties that would affect this in the RowTemplate object.

Thank you!

2

I haven’t seen data grids do this before, but I have experienced some other funky behaviour in the IDE, that does not actually end up looking strange when it gets rendered to a page - so this is new. (er new to me)

This threw me for a loop trying to fix it, and I have something even stranger. If you fix one of these grids the other one does the exact opposite.
Observe:

weird_grids
weird_grids872×829 718 KB

Should this be in bug reports?

I also don’t know what passing integers instead of data to the rowTemplate actually does, but it does not appear to be the issue causing the above.

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