Adding components to datagrid/repeating panel

Anvil Q&A
1

Hello everyone, I’ve run into a major issue with a project I’m working on.
I’ve got the standard set up of a data grid with a repeating panel in it.
The data I want to add is contained in a list of dictionaries, each dictionary consisting of two text entries and an unknown (but equal across all dictionaries) number of entries that I want to display as components.

The list of dictionaries looks something like this:

    data =  [ { <text_entry_1>:<text> , <text_entry_2>:text , <component_entry_n>:<anvil component>},
    <more dicts of the same format>]

The relevant anvil components right now are images, but I’ll be using buttons eventually. The components that are added to the list are created and added to the data list like this, where green.png is an asset I added:

    data[index][<component_entry_n>] = Image(source=anvil.URLMedia(anvil.server.get_app_origin() + '/_/theme/green.png'))

It displays just fine when I write

    self.add_component(Image(source=anvil.URLMedia(anvil.server.get_app_origin() + '/_/theme/green.png')))

somewhere in the code, but when I add the data list with the dictionaries with components to the repeating panel it ends up looking like this:

anonymized gridbox
anonymized gridbox979×283 9.35 KB

(Some non-relevant text blocked out for NDA reasons.)
I’ve also tried with buttons instead of images and got the exact same result, so the problem is likely adding components in general, rather than anything specific to do with the Image component.

Thanks in advance for any advice.
/ Erik

2

I tried a few things, and realized I should probably use self.add_component() in the init-function in the template to add the images from **properties. However, this doesn’t work; the following code:

    class RowTemplate1(RowTemplate1Template):
      def __init__(self, **properties):
        # Set Form properties and Data Bindings.
        self.init_components(**properties)
        for key in properties["item"]:
          if key != "redacted" and key != "redacted":
            component_1 = properties["item"][key]
            print("Printing type(component_1):")
            print(type(component_1))
            print("Printing component_1:")
            print(component_1)
            print("Attempting to add component_1 to self via add_component():")
            self.add_component(component = component_1, column = key)

Gives the following output:

Printing type(component_1):
<class 'anvil.Image'>
Printing component_1:
<anvil.Component object>
Attempting to add component_1 to self via add_component():

Exception: Argument to add_component() must be a component at [Form1.RowTemplate1, line 22](javascript:void(0))

Exception: Argument to add_component() must be a component at [Form1.RowTemplate1, line 22](javascript:void(0)) called from [Form1, line 51](javascript:void(0)) called from [Form1, line 12](javascript:void(0))

An

<anvil.Component object>

really does seem like it would be a component.

3

Hi @asdert458,

Here’s a simple example which follows a similar pattern to your code above:

https://anvil.works/build#clone:AVRY356KQFP57HPU=AVXIEJRCBVCDXXCEIBQ5PMNJ

You’re right to call self.add_component from the __init__ function of your RowTemplate, but the column argument should be the ID of the column you’d like to add the component to. In my example, I’ve created my columns using code, and want to add my components to the column with ID ‘C’.

I hope this clarifies things, but if you’d like me to take a look at your app, please do share a clone link.

To do this, go to the gear menu :gear: in the Anvil editor, then choose Share app and then Share your source code and data with others. (Note: Only do this if you are comfortable with everyone seeing your application, its source code and everything in its Data Tables!)

4

Hello @bridget, thank you for your response.

I also create my columns in code in this app, as I don’t know beforehand how many I need, or what they’re called.

I am already using the id of the column for the column argument, as I’ve set each column to have the same value for both the id and the data_key (and title too for that matter).

I printed the contents of self.data_grid_1.columns in the main form and found that it did indeed have an id matching the value of key from the RowTemplate1 code in my previous post.

This has stumped me since friday; and while I’d love for you to take a look at it, the app uses an uplink to interact with a local database and I’m not allowed to divulge any of the data.

EDIT:
(Before I even had the time to make this post.)

It appears the problem was that I was using a keyword for the component argument; that was the only difference I noticed, and now it works!
It seems a bit odd that it’d break because of a keyword.