Skip to end of metadata
Go to start of metadata


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: 


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

NameCSS ClassExample

default

grid-default

infogrid-info

primarygrid-primary

successgrid-success

warninggrid-warning

dangergrid-danger

cleargrid-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 2Press 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 1Drag 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 1Drag and drop a Ticket component onto a Grid header cell, or
Option 2Double 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.