List view and Grid view using only one repeater

Although I think the answer is ‘Computer says no’ I thought I’d ask anyway.

I would like to create a list of elements that can be displayed either in grid or in list view. The grid would be consisting of four columns, so I’m setting the repeater to ‘horizontal + wrap after 4 items’.
Now, if I want to display a list view, this would need to change the repeater styling to ‘vertical + no wrapping’.
My current solution is using to repeaters wit hthe same set of data but different styling and then switching between both using a dynamic panel. However, for obvious reasons, this is not my preferred solution and I’d rather use a single repeater for the task.
So, my question is - can this be done? (even though I think I know the answer, see above)

I guess the “obvious reasons” are that you want to keep a single set of data, not two. If that is the case, you can use two repeaters as you already did but keeping the “child” repeater empty, only with the columns you need but without data, and using a single set of data in the “father” repeater.

Then add an “Add rows” interaction as OnItemLoad in the “father” repeater to populate the child repeater with the same data. In this way you’ll only need to care about de data in the first repeater and you’ll be able to style each repeater in a different way.

Here is a silly example: list and grig views.rp (56.0 KB)

I can think of a really “hacky” way of doing it using adaptive views and dynamic panels inside the repeater:

  1. Build out your “tile” view in the repeater.

  2. Wrap those widgets in a dynamic panel

  3. Duplicate that state and reconfigure the widgets into a row.

  4. Enable adaptive views on the page and create a new view. Set its condition to something that will never happen (like, width is less than 10px or something).

  5. Switch to the new view and make the layout changes you want on the repeater.

  6. Now add logic to the button that switches the list to change the adaptive view and the dynamic panel to match the “list view” you want.

It sounds more difficult than it is really: OneRepeater_MultipleLayouts.rp (64.6 KB)

Hi @lastmonkey and @huban, thanks for your creative ideas. It shows me that this can be achieved, but not in an elegant 'out-of-the-box fashion. And yes, one of my obvious reasons was to have a single data source, the other is simply performance and complexity. Although Axure has become better in rendering repeaters over the releases, using two repeaters on the same page is still not something that’s making things lightning fast :wink: The adaptive view example looks promising but also kind of “hacky” as you said.
So, if anyone from Axure has tuned in: This would be my feature request (being able to control repeater layout options by logic)

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.