I can not figure out how to add component (another form) to the right of the grid panel. I know how to add it to top or bottom but don’t know hot to add it to right side. I tried to have some hidden column panel and add component to it but it moved everything to the left even if hidden.
I need to show/hide vertical panel with data, similar to the left vertical navigation menu - when displayed everything on moves to one side.
Hello,
Please see the GridPanel documentation if you have not already.
If I understand correctly, it specifies how to control the column position when adding components.
For example:
gp = GridPanel()
f2=Form2()
gp.add_component(f2, row="A", col_xs=9, width_xs=9-12)
self.add_component(gp)
If I have misunderstood, please share screenshots and/or clones for clarification.
I tried but it always appear in the bottom, on the right side but in the bottom…
I am trying to achive something like this:
Are you trying to achieve what you see on the right?
What does it look like when you tried my suggestion above?
So I can get a better sense of your component set up, could you share a screenshot of the component layout in the properties window? It looks something like,
If it helps, when I try putting a DataGrid inside a grid panel, and then I put another form into the rightmost columns, the form is placed in a lower row (the tops of components are not aligned). For example:
If I put the custom form in a ColumnPanel, and put that on the outside of the DataGrid, this works fine to line things up, but perhaps there is other functionality that won’t work with this set up that you require.
This is the layout of the components:
@shaun Hello, I think @jan.kyselak has discovered a bug that prevents alignment of objects in a grid panel. It is possible that this occurs only when embedding DataGrids in a GridPanel, I’m not sure. App to demonstrate the issue:
https://anvil.works/build#clone:I7FKEZSI6H53ZUXD=PB6ZPTZXGCDFKSAF5WLLHT4M
Hi both! This is very much do-able. You need to add both components programmatically, so that you can designate the same row name for both of them. Otherwise, the programmatically-added component gets added to a new row, which gets created underneath the dragged-and-dropped component.
I’ll update the docs to make it clear that the row names are not the names of pre-existing rows created by the designer, but rather the names of new rows designated by you.
Here’s an app where I’ve implemented a right-hand nav with a Grid Panel. The ‘hamburger menu’ icon is a Link that toggles between self.nav_shown = True and self.nav_shown = False. When the nav is shown, it adds both components to the Grid Panel. When the nav is hidden, it just adds the Data Grid to the Grid Panel.
I dragged-and-dropped the components into the Form in the initial state, so that in the Design View you can see how things look. That’s just for convenience, it would work without it.
https://anvil.works/build#clone:LXSRWJUZKZU4S2QZ=P6KZKXGRCHMMM2N7D4IV6XRY
