Repeating Panel Grid

[robert]

I’m trying to build a grid from a repeating panel that will flow (no scrolling). Ideally, the items in the grid will be a template with elements I’ve arranged. This is quite easy to do with a repeating panel that fills vertically. But can this be combined with a grid panel? Ideally, I want something like this (sorry for the poor drawing):

This post shows an app that creates a horizontally scrolling repeating panel. Horizontal RepeatingPanel (Again)

This post shows how to dynamically generate items in a flow panel. I’m guessing this is more what I need, but I actually want a template so I don’t have to figure out how to build the elements with code. Repeating Panel--horizontally

I’m somewhat at a loss right now.

[robert]

Well I kinda have it figured out maybe sorta. I made a grid panel and added three repeating panels and connected it to the same template.

Now I’m going to connect the data from the data table. For the first column I will add the indexes 0, 3, 6, etc (maybe with a modulo or something), for the second column I will add indexes 1, 4, 7, etc. Third column etc. I will update with the completed code.

EDIT: Well that wasn’t hard. I used data bindings to connect each element to it’s corresponding column in the data table. Then I did a search on the data table and sliced those.

This is the code in the form that slices the results. The first position is the starting point, second is the stop, and third is the step value.

self.repeating_panel_2.items = app_tables.coupons.search(active=True)[0::3]
self.repeating_panel_3.items = app_tables.coupons.search(active=True)[1::3]
self.repeating_panel_4.items = app_tables.coupons.search(active=True)[2::3]

[stucork]

To use a RepeatingPanel rather than a GridPanel:

create a role restricted to RepeatingPanel called 3-cols

theme.css

.anvil-role-3-cols > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 3%; /*adjust as needed*/
}

Then just change the role of the repeatingPanel to 3-cols…

(NB it may not look quite right in the design view - but when you run the app it should be correct).

[robert]

That is much easier than my solution. Any idea how to make the items wrap on mobile?

I tried putting the repeating in a flow panel with no luck.

[stucork]

What about a media query:
change the css to be:

@media screen and (min-width: 768px) { /* only on tablets and larger*/
  .anvil-role-3-cols > div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 3%; /*adjust as needed*/
  }
}

I haven’t tested it but I think it’ll work… It basically says behave like a normal repeating panel unless it’s a tablet or wider…

[robert]

Beautiful and that did the trick. Thanks!

[robert]

Thought I would share what I got it to look like. It’s working quite well.