Best way to set width of datagrid columns created from code?

Anvil Q&A
1

I have a large number (20-ish) in a table in my database which I want to show in a datagrid. I’m using the following code to build it up. However, the columns are written in a very overlapping, jumbled way. I’ve tried two things: setting the width manually for each by setting one_column[‘width’] in the column array I build up, and also added the css found here() to theme.css. Neither has any effect it seems. While width does indeed set the column width, without the ability to scroll horizontally, it still is a jumbled mess.

Could someone point me to a tutorial/doc/forum post which would demonstrate the appropriate way to do this? Thanks in advance!

 def __init__(self, **properties):
        # Set Form properties and Data Bindings.
        self.init_components(**properties)

        # Any code you write here will run when the form opens.
        training_grid = DataGrid()
        
        columns = app_tables.lms_classes.list_columns()

        id = 0
       
        grid_columns = []
        for one_column in columns:            
            row = {
                "id": f"{str(id)}", "title": one_column['name'], "data_key": one_column["name"],
            }            
            grid_columns.append(row)
            id += 1

        training_grid.columns = grid_columns
        
        logger.pprint(training_grid.columns)
        
        trainings_repeating_panel = RepeatingPanel(item_template=DataRowPanel)
        
        training_grid.add_component(trainings_repeating_panel)
        
        self.add_component(training_grid)
        
        trainings_repeating_panel.items = anvil.server.call('get_trainings')
1 Like
2

This part, at least, has been solved on the Forum. Try the search term “horizontal scroll”, and you’ll have many messages to choose from.

1 Like
3

Have you set this?

image

1 Like
4

I’ve tried that, but it has no effect. I tried setting it on either call to add_component in the sample code I provided, but to no effect. I will update here when I find a solution. Thanks!

5

I’ve tried a number of approaches found in the forums, but none work so far. I think it’s related to the way I’m building up the columns dynamically, but not certain yet.

Here’s a clone-able example… Anvil | Login

If you see anything obvious, please comment. Thanks!

6

The first thing to do is to replace one_column with row here:

image

The second is to increase that 50 to 250.

The third is to use components like labels in the template form, because they will be able to wrap when their text is too long, while the default behavior of the text in a datagrid column without components is to show a plain text.

In this little app you can see how to dynamically add components to a datagrid template.

3 Likes
7

This worked perfectly…thank you! I can’t believe I missed that. Not enough coffee :wink:

Thanks!

8

And I have no idea why I named that row, while it’s describing a column in the grid. Talk about confusing code :wink: Thanks again!

1 Like