How to create a matrix

How to create a matrix

  

Hello there.

I'm trying to create a grid look for an app. The objective is to display a collection of "Seats" (it is a movies app, and when the user tries to buy a ticket, he gets to choose his seat) like so:

Now, being that there isn't a "Grid" widget, what I did was create a list with a column5 widget inside. This comes with a problem: when using aggregates to get the Seats, I get one Seat per line. This leads to every line on the list representing one seat instead of 5.

To avoid this, I thought about creating a new variable which would be of type List of List of Seat, but this doesn't exist, so I created a List of Records, where the record entry is List of Seats.

The objective of this List of List of seats would be to iterate through the GetSeats aggregate. I already have an algorithm implementation, that simply put, iterates through the Seats until it reaches a new letter and creates a List of Seats with all the seats of that letter, then (and this is the problem) supposedly appends that List to the original List of Lists. Unfortunately, it is impossible to give a List of Seats as an input to the List of Records I created.

I understand this is probably a bit confusing, so please let me know if I was unclear on what I intend/what I already have.

So now I have 2 questions: am I trying to solve the problem the right way? if not, how could I go about solving this problem?

ty in advance!

Solution

well, I'll answer my own question, in case someone else needs it.

turns out I was approaching this incorrectly, because I thought a list could only contain 1 item per row, which is not the case.

That said, creating a matrix can be accomplished in two ways:

-either set the width of the list component to a value smaller than 6 cols (6 cols leads to a 2xN matrix, 4 cols leads to 3xN, etc...) if the number of items per row you want is divisible by 12

-create a css class that looks something like .fiveCols{ float: left; width: 20%; }and set the width to the percentage that suits your needs, then just set the list item to this class. 

The second approach will make the preview look really weird, but if you run it it will be fine.


hope this helps

Solution