Horizontal layout style in first index, vertical layout style for all other indexes

repeater-widget
#1

Hi,

I’m pretty new to this forum, this is my first post, sorry if the formatting or something is wrong. I’ve read many of the forum articles before based on problems and bugs I’ve stumbled on in the past and this has been a great resource. I’ve been trying to set a horizontal layout under styles for the first index and a vertical layout for all other indexes in my repeater. This is for a mobile view where the you have four items on the left side (4 columns in repeater) and each has about 8 rows in the repeater and I have it so that with the horizontal view there is 4 rows and 8 columns, but I want it so that the first column is there, but when I click any of the rows from this first column (index 1), it would expand to show the other 7 rows in a vertical layout.

Is it possible to use a horizontal and vertical layout within the same repeater? Do I have to make a seperate rectangle for my index 1 in the repeater and another rectangle for all other indexes and then set the values this way such that the first rectangle is horizontal view and the other one would be vertical view?

image
image.png1534×100 2.77 KB
This is a visual representation of what I have so far.

Also, how do I go about making onClick for the first index values of the repeater to only show its corresponding columns as seen by the picture in a vertical view? For example, Horizontal1 would be an onClick to only show Vertical1a to Verticalg in a vertical style layout, and so on for each Horizontal row to open only its corresponding columns.

Thanks in advance!

#2

Hi!

I couldn’t quite tell from your description what exact layout you wanted, but I get the gist of it. What you are asking to do is fairly advanced, but not uncommon.

You’ll need two repeaters with the same number of rows. The first repeater will display the Column1 information only, and the second repeater will display the details, though it will also have the same values as in Column1 of the first repeater; that column will be used to link the two repeaters.

Here is an example with explanations. It links the two repeaters on the ‘name’ column. Note that the second repeater has the name column, but it’s not displayed. That column is used to link the two repeaters.

Live sample

File: linkTwoRepeaters.rp (104.2 KB)

#3

Thanks so much, this is brilliant! Using two repeaters with the columns matching worked magic! I had to change some minor things like Style Layouts for vertical/horizontal, and case conditioning for adaptive views, also had to reformat my two repeaters, but it was well worth it.

Sorry for the late reply, thanks again!

closed #4

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