Ticket Grid - v2

1 When to use a Grid
2 Questions cannot be placed inside of a Grid
3 Grid Settings
4 Grid Styles
- 4.1 Changing the style of a grid
- 4.2 Grid Style Classes
5 Designer Controls - creating a grid, adding tickets
- 5.1 Creating Grids
- 5.2 Adding Tickets or Text
- 5.3 Note
- 5.4 Insert, Duplicate, or Delete a row or column
- 5.5 Note

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 axes.

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 axes.

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

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

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.