Grid Layout
  • 18 Aug 2023
  • 3 Minutes to read
  • Dark
    Light

Grid Layout

  • Dark
    Light

Article summary

Overview 

The Grid Layout is the default Layout for any new Form, organizing space through cells created by adjusting the size and padding of columns and rows. It is particularly beneficial for Forms that contain a lot of content or require complex design requirements since it offers consistent placement, spacing, and padding. Additionally, controls placed within a cell automatically adjust to fit its size, allowing for precise and intentional information placement.

Nested Grids provide further control over the Layout, as they allow for the size of a child Grid to be controlled by editing its cell on the parent Grid. 


Configuration

Due to the inherent scalability of this Layout, it is best practice to plan out the contents of this Layout first before adding any controls or introducing additional Layouts. 

In the Form Designer, select the Grid Layout to open its Properties tab and view these settings.

Grid Setup

Users can Right-click on the grid layout to take multiple actions on the layout and the control used within the cell. Some of the actions are also visible while hovering over the values under column/row from the properties panel. Selecting the vertical ellipses icon expands a list of Grid manipulating actions:

Action NameDescription
Save as TemplateSaves a Template with the given name of the selected grid in the Toolbox > Templates.
Select Parent [Root Container]If there is a grid within a grid, this will select the Parent of the selected grid.
DeleteDeletes the From Control within the cell. If Form control is absent, it will delete the entire grid.
CopyCopies the Form Control within the cell. If no control is present, this will copy the entire grid.
CutPerforms the Cut action on the Form Control. If Form Control is absent, this will cut the entire grid.
Edit RowOpens an Edit Panel for the selected Row.
Edit ColumnOpens an Edit Column for the selected Column.
Add Row BeforeAdds a row before the row the user selected.
Add Row AfterAdds a row after the row the user selected.
Add Column BeforeAdds a column after the row the user selected.
Add Column AfterAdds a column after the row the user selected.

Add Columns/Rows

In the Properties panel, under the Grid Setup section, select the ADD button link underneath the column/row box to create a new column/row. The Add Columns/Rows dialog displays the same settings as the Edit Column/Row window.

Resize TypeDescription
Settings

MaxSizeRestrict the column or row size to that pixel value.

Min Size

Requested SizeInput the definite value of that object.
Layout > Resize Type

FixedThe Column or Row is restricted to the defined size.
 
To display a control restricted by a Fixed Resize type, the Form's size must equal, at minimum, the defined Fixed size. Altering the size beyond the parameters of this property will NOT properly display that element within the Fixed Column or Row.

GrowThe Column or Row automatically increases in size to fit the space left by Form's other columns/rows. This setting does not allow the Column or Row to decrease.

ResizeThe Column or Row automatically increases or decreases in size relative to its other Column/Row so it may fit the Form. For example, if the Column or Row's size exceeds the size of the Form, then that Column or Row will decrease in size. If the sum of the Rows or Columns does not meet the determined size of the Form, then the Resize set Row or Column will increase in size to fill that space.
There must be at least one Resize value. A Resize value is denoted by an asterisk beside the numerical value.

Gutters and Margins

Gutters are useful for introducing spacing between columns and rows, allowing for greater formatting flexibility. Adjusting the Column/Row Gap settings controls the amount of space between columns and rows in pixels.

The Grid Setup panel includes options for defining Margins as well. These Margins determine the size of the space, if any, between the Grid and the body of the Form. Setting margins fine-tunes the pixel spacing between these elements.


Feature Changes

DescriptionVersionDateDeveloper Task
Added actions to resize Grid Rows and Column8.1207 Jun 2023[DT-037794 ]

Was this article helpful?

What's Next