Add ColumnPanel Components In Code

I want to dynamically create the contents of a component panel.

The docs say this :

Components added at runtime using the add_component method will each be added to their own row

How do I add a component to the same row but a new column in code?
Can I then adjust the width of each column?

The ColumnPanel is a hairy beast, with a complicated specification for its layout - and it’s not one we’re 100% happy with yet, so we haven’t documented how to make do it from code. This makes it the one piece of Anvil that we don’t (currently) support doing from code, only from the visual designer.

If you’re building a layout from code, we recommend you use the GridPanel component, which is much more comprehensible. (No nested columns - if you want to do nesting, put one GridPanel inside another). Anything you can do with the ColumnPanel, you can do with GridPanels, or nested GridPanels - and the code will be much simpler.

(Trivia: We originally used GridPanels for everything, but they weren’t so great for creating a user-friendly drag’n’drop experience in the designer. We therefore created the ColumnPanel, and the code for laying out components in ColumnPanels is probably the most complicated part of the Anvil designer.)

5 Likes

Understood.

What I’m actually doing is creating a data grid (with pagination,column sorting, etc). Currently I am creating header and line item templates and loading them into a column panel (much like the todo example), but I need to create templates for every grid I’m going to need in the app, so in my attempts to make it generic I want to be able to define the column count, widths and header titles on the fly. The data grid will need to dynamically display from large record sets in sensible chunks.

Most of the issues are getting around cosmetic oddities (getting the headers to line up with the columns due to too much padding from various components, etc.)

Once done I shall share the project in the hope it will be useful to people.

Yeah - if I were doing that, I would definitely be using a GridPanel! Try it out and see how you find it…

It’s definitely what I needed, thanks.

I’ve built a (0th-draft) collapsing/expanding outline on a GridPanel, so I’m sure it can be done relatively simply.

Is your grid intended for display only? Or for data entry as well?

@p.colbert : display only for now. Because all data input has to be validated in several places I’ve always found in-line style editing to be inadequate (or at best a complication). I always favour click to view details & to edit/add.

Would like to see your widget. I’m about to start working on a tab panel once I’ve finished the data grid.