Adding labels to a Data Row Panel in a dynamic way

What I’m trying to do:
I have a Data Grid with a Repeating Panel inside. The Data Row Panel is the RowTemplate of which the rows contain the content of the de database rows of the coupled table. So far everything is standard and works fine. Now I want to adjust the look of the items of the RowTemplate. I can do this via drag&drop of Labels. But I want to be able to dynamically change the colors of the labels. Therefore I don’t want fixed labelnames, because I have a lot of columns.

What I’ve tried and what’s not working:
I tried to create the labels in the code and use add_component to add them to the form. But although I specify the column name when I add the created labels, they show up in seperates lines underneath each other. Also the original lines which are composed of the self.item still show up. They show up in the correct columns., where I want my new labels to be seen.

Code Sample:

class RowTemplate2(RowTemplate2Template):
  def __init__(self, **properties):
    self.init_components(**properties)
    self.col_count = len(data_access.settings['column_order'])
    self.col = {}
    # create labels
    for i in range(0, self.col_count):
      self.col[i] = Label(background = "theme:Gray 300")
    # fill label text and add label
    i = 0
    for item in self.item:            
      self.col[i].text = item[1] + "/" + str(i)
      self.add_component(self.col[i], column=item[0])
      i += 1

You don’t need to dynamically create new labels to do that. You can compute and set the colors of your existing labels. I don’t do it often, but I can assure you that it works. If the label is named self.lbl1, then I can assign self.lbl1.background = "theme:Gray 300" , etc.

Adding a component does not remove any existing component. If you want to remove the existing component, you can do that, but you must do so explicitly. Search the docs for remove_from_parent.

Ah, I didn’t realise that I could change the properties this way as well. However I need to change the order of the columns too. Therefore adding labels may be a bit easier in my case. I wil try to use the remove_from_parent. Thanks for your replies!

Do you know what I need to do to get the labels on the same line? According to the documentation adding a column name should position the label in the right column, but that is not what I see happening.

You want code to place a new label in a specific column?

Edit: does the column already have a component in it?

You want code to place a new label in a specific column? Yes

Edit: does the column already have a component in it? Well it shouldn’t but as I did not implement the remove_from_parent it in fact has a component in it already. I will first check if this problem may be solved by removing the components.

In a column, components will naturally stack vertically. When you do want multiple components, but don’t want them stacked, the usual solution is to place a container (e.g., a FlowPanel) in the column, then place your multiple components inside that container.

Hi,

If you want to add components to an existing datagrid/datarow panel then the column is not the key you see in the UI but the id , which is auto generated and only visible in the UI when you drop a component on the datarow panel and look at the column under container properties .

You could look that up in code but what i always do is set the columns property of the datagrid, and use the same names for data_key and id. So in your case it would be something like this in your form on which you have the datagrid:

class Form1(Form1Template):
    def __init__(self, **properties):
        # Set Form properties and Data Bindings.
        self.columns = ['col1','col2','col3']
        self.data_grid_1.columns = [{'data_key':x,'id':x} for x in self.columns]
        self.data = [{'col1':1,'col2':2,'col3':3},{'col1':10,'col2':20,'col3':30}]
        self.init_components(**properties)
        self.repeating_panel_1.items= self.data

and in the rowtemplate:

class RowTemplate1(RowTemplate1Template):
    def __init__(self, item,**properties):
        # Set Form properties and Data Bindings.
        self.item=item
        for col, val in self.item.items():
            self.add_component(Label(text=val,background = "theme:Gray 300"),column=col)
        self.init_components(**properties)
1 Like

Thanks a lot Ferry, your instructions helped me to solve my problem! It works now as expected.

For others who face a comparable problem, the documentation I found on this subject is not so verbose:
https://anvil.works/docs/client/components/data-grids#manipulating-data-grids-using-code