Data Grid Through Code

I am trying to load a DataGrid in two ways. Here is my example below

https://anvil.works/build#clone:QOY5XHCZYGWTCA5J=5V6TSEEBAU5AUK7XSDYYHMBM

Case 1: StaticGrid
Added DataGrid component in Design mode, filled out all column properties manually

def load_data_btn(self, **event_args):
"""This method is called when the button is clicked"""
df_dict=anvil.server.call('get_df_dict')
self.repeating_panel_1.items=df_dict

Case 2: Dynamic Grid (…making this the startup form)
I am trying to do the same thing, but have the grid columns be dynamically created upon reading the dictionary (dataframe) being returned. Columns are not defined ahead of time

def load_data_btn(self, **event_args):
"""This method is called when the button is clicked"""
    df_dict=anvil.server.call('get_df_dict')
    cols =  list(df_dict[0].keys())

grid_cols=[{'id':i, 'title':i, 'data_key':i} for i in cols]
self.data_grid_1.columns = grid_cols

for drow in df_dict:
  row = DataRowPanel(item=drow)
  self.data_grid_1.add_component(row)

Case 1 works, while Case 2 hangs. I have been able to trace the delay to the last for loop. It is a copy of the documented example on DataGrid section. Am I doing something wrong?

Hi @ananth.krishnamoorth,

You are correct in identifying the issue, the hanging is caused by the last loop of case 2.

The reason case 2 is hanging is because it isn’t using a repeating panel. Repeating panels create RowTemplates one page at a time, rather than adding them all up front. In case 2 the app is creating a DataRowPanel for every line of data up front, which is causing it to hang.

You can still create the columns dynamically for a repeating panel in case 2, the only difference is instead of using:

for drow in df_dict:
    row = DataRowPanel(item=drow)
    self.data_grid_1.add_component(row)

You can do:
self.repeating_panel_1.items=df_dict
Like you have in case 1.

Here is a clone link with the correction:
https://anvil.works/build#clone:BXDKFEHJFKRUU4WH=J7WYA44TAD3ZUVQOAJMZ63KA

1 Like

Thanks. This is very helpful. It works

I still have a nagging question…why does the documentation give the following code? Any guidance on when this should be used, versus the repeating panel?

for person in data:
    row = DataRowPanel(item=person)
    row.add_component(TextBox(text=person['name']), column="A")
    grid.add_component(row)

Hi @ananth.krishnamoorth,

Both ways of adding rows work. I would use add_component() if I wanted to explicitly add a row and then set a property of that row like pinned, which pins the row to every page of the DataGrid component.

grid.add_component(row, pinned=True)