Grids let you align multiple fields in an attractive layout in your user interface. Grids are most often used to show a large number of fields that need to be visible on-screen at the same time: the grid helps you align these fields next to each other (left to right, or top to bottom). By aligning fields in a grid, you can get more information from your user in less space, and often make the UI easier for them to understand.
Use
Grids are built by using two layout elements: The GridRow and the GridColumn. First create your GridRow control, which defines the horizontal space your first row of the grid will fill. Then, inside the GridRow, create as many GridColumns as you need. Finally, add another GridRow (and the GridColumns inside it). Repeat for as many rows you need. To reorder the columns or rows, drag them up or down in the design tree.
GridRow Properties
GridColumn Properties
| Name | A name which is referenced to on the left tree and rules. The name must be unique to the configurator. |
| Visible | Specifies whether this page is shown to the user by default or not. This property can be changed in the visibility rules. |
| Vertical Alignment | Select how elements in this row are aligned vertically. |
| Horizontal Alignment | Select how elements in this row are aligned horizontally. |
| Space Between Items | Controls how much whitespace is used to separate items in the GridRow. |
| Collapse on Mobile | If your grid is about to display on a mobile device with a smaller screen, there may not be enough space to render your grid. By setting this property to true, the grid columns will collapse to take up the full width available. By setting this to false, the grid columns will remain side-by-side, even if the user has to scroll horizontally (an unusual direction to scroll, so your mobile users may forget to do so and not see your right-most columns). |
| Name | A name which is referenced to on the left tree and rules. The name must be unique to the configurator. |
| Visible | Specifies whether this page is shown to the user by default or not. This property can be changed in the visibility rules. |
| Relative Width | Adjust this property to make a column take up more logical width in the GridRow. See the example below for one way to use this property to align columns across rows with differing numbers of columns. |
| Vertical Alignment | Select how elements in this row are aligned vertically. |
Examples
As a reminder, if you simply add fields to a layout (say, a page or an accordion) with no grid, they appear one field below the next:
Adding a simple grid allows you to present these fields side-by-side:
You can build more complex grids to make a simple form. Here, the first row has two columns, and the second row has three:
While this example is fine, it could be easier to read if we align the first and second rows. Since the first row has 2 columns, and the second has 3 columns, the columns don't align (1+1 is smaller than 1+1+1). This can be fixed by using the "Relative Width" property of some GridColumns to make them wider. Here, our first row has one fewer columns than the second, so we want to make either the First Name or the Last Name column one unit wider. Then both gridrows will be the same units of width wide, and they will match. Since last names are often longer, adjust the GridColumn containing the "LastName" field: set the Relative Width property of that column to "x2", to say it should take up the space of 2 columns. Now, the total width of the first row (1 + 2) matches the second row (1+1+1), and they are visually aligned.
