A Grid allows for the layout of Tickets within a table. Grids support rich text in the row and column headers, and allows users to scroll horizontally when viewed on small screen devices. To ensure users are aware of off screen columns, a caption text appears prompting them to scroll to the right. Using a Grid helps users compare and pick from the Ticket options available. This feature is available in Events Registration version 2.
When to use a Grid
Use a Grid when there are a large amount of tickets that can be categorised along two axis.
For example, when selling tickets for an event that runs across three days and has two workshop topics available, we could create the following Grid to present the tickets:
In this example, the two variables are the day, and the workshop topic.
Questions cannot be placed inside of a Grid
Questions are not permitted inside of a Grid because they cannot be categorised along two axis.
To achieve a tabular layout with Questions use columns. Columns on mobile devices collapse underneath one another, creating a pleasant user experience. Placing Questions inside of a Grid means that mobile users must awkwardly scroll right to answer your questions.
Grid Settings
Grids have a number of settings that control behaviour and styling. To change them, click on the Settings icon for the Grid: 
| Setting | Description | Tab |
|---|---|---|
| Show column headers | Toggles whether column headers are visible. | Grid |
| Show row headers | Toggles whether row headers are visible. | Grid |
| Number of rows | The number of rows of Tickets in the Grid. Changing this value resizes the Grid. Tickets that have been sold or reserved are moved to the Unused Ticket toolbox. This count does not include the column header. | Grid |
| Number of columns | The number of columns of Tickets in the Grid. Changing this value resizes the Grid. Tickets that have been sold or reserved are moved to the Unused Ticket toolbox. This count does not include the row header. | Grid |
Grid Styles
Changing the style of a grid
To change the style of a grid:
| 1. | Click on the grid's Settings |
|
| 2. | Select the Advanced tab | |
| 3. | Select the Text Editor view to enter CSS classes by text. |
|
| 4. | Type the relevant CSS Class from the table below, for example: grid-info |
Grid Style Classes
Grids support the following styles.
| Name | CSS Class | Example |
|---|---|---|
default | grid-default |
|
| info | grid-info |
|
| primary | grid-primary |
|
| success | grid-success |
|
| warning | grid-warning |
|
| danger | grid-danger |
|
| clear | grid-clear |
|
Designer Controls - creating a grid, adding tickets
Creating Grids
To create a new Grid, either:
Option 1 | Drag and drop a new Grid onto the builder, or |
|
| Option 2 | Press Ctrl, then drag and drop an existing Grid to another place in the form builder to create a copy. |
Adding Tickets or Text
To add Header Text to a Grid, make sure the Show row headers or Show column headers is selected, then either:
| Option 1 | Drag and drop a Text component onto a Grid header cell, or |
| Option 2 | Double click the plus icon in an empty header cell to create a new Text component. |
To add a Ticket to a Grid:
| Option 1 | Drag and drop a Ticket component onto a Grid header cell, or |
| Option 2 | Double click the plus icon in an empty cell to create a new Ticket component. |
Note
Text is only allowed inside of a row or column header, and Tickets are only allowed in non-header cells.
Insert, Duplicate, or Delete a row or column
Header menus are located along the top row and left most column. To insert, duplicate or delete a column:
| 1. | Click on the header's menu to show the drop-down menu. |  |
| 2. | Select Insert, Duplicate, or Delete Row/Column. Inserting or duplicating a row or column will add the new row or column after the row or column that the header menu belongs to. |
Note
Header menus are display, for example, either Insert Row, or Insert Column, depending on whether they are row headers or column headers. The below image depicts clicking on a Row Header, while the image in the previous steps depicts clicking on a Column Header.
