AX1278

Setting column sizes for Formatted Grids

To set column widths for Formatted Grid components, use the [ColumnWidth] tag in the Grid data source. Within this row, you can set a specific size for each column in the data source, using either pixels or percentages as the size units.

The [ColumnWidth] tag is included by default when you create a new Grid data source. If the tag is not present in an existing data source, you can manually add it (or use the Data Source Assistant to add it). Typically, the tag is placed near the top of the data source, above any content rows.

Within the [ColumnWidth] row, enter a size for each content column that will be displayed in the form. This means any column that is flagged with [Column] or [Fixed]. Sizes can be entered as follows:

Size	Description	Examples
Specific size	Enter a single number to set the size of the column to that number. The size can be expressed in pixels or as percent.	50px 25%
Size range	Enter a minimum and maximum number to set the allowed size range for the column. The column will be sized somewhere in this range, depending on the other column sizes and the overall width of the component. Use a hyphen to separate the minimum and maximum number. The column will display at the minimum size by default. If the total of all column widths is less than the overall width of the component, then the column will "flex" wider, up to the maximum size. When mixing pixels and percents in a range, it is possible for the maximum number to end up smaller than the minimum number once the percent is resolved to pixels. In this case, the maximum number is effectively ignored and the column will not expand past its minimum number.	50px-100px 25%-40% 50px-25%
No size	If the column has no defined size, then the column will be sized as if it has a minimum size of 0px and an unlimited maximum size. Therefore its rendered size will depend on the other column sizes and the overall width of the component. The column will display at the minimum size by default. If the total of all column widths is less than the overall width of the component, then the column will "flex" wider, with no maximum size limit.	N/A

Size

Description

Examples

Specific size

Enter a single number to set the size of the column to that number. The size can be expressed in pixels or as percent.

50px

25%

Size range

Enter a minimum and maximum number to set the allowed size range for the column. The column will be sized somewhere in this range, depending on the other column sizes and the overall width of the component. Use a hyphen to separate the minimum and maximum number.

The column will display at the minimum size by default. If the total of all column widths is less than the overall width of the component, then the column will "flex" wider, up to the maximum size.

When mixing pixels and percents in a range, it is possible for the maximum number to end up smaller than the minimum number once the percent is resolved to pixels. In this case, the maximum number is effectively ignored and the column will not expand past its minimum number.

50px-100px

25%-40%

50px-25%

No size

If the column has no defined size, then the column will be sized as if it has a minimum size of 0px and an unlimited maximum size. Therefore its rendered size will depend on the other column sizes and the overall width of the component.

The column will display at the minimum size by default. If the total of all column widths is less than the overall width of the component, then the column will "flex" wider, with no maximum size limit.

N/A

NOTE: If units are not specified on the number (px or %), then pixels are assumed. It is recommended to place units on all numbers to avoid confusion and to prevent Excel from auto-converting certain entries into dates.

If you are using percentages, the column width is determined using the total rendered width of the Formatted Grid component. For example, if you specify 25% for a column and the component width is 400 pixels, then the column will be 100 pixels wide. The component width may be a fixed size (such as 400px) or a relative size (such as 50% of the form or of the parent panel). If the component width is relative, then when the form is rendered the actual component width is calculated first and then the column width is calculated.

If the total of all column widths (using the fixed or minimum size) exceeds the overall width of the component, then a horizontal scroll bar will be present on the grid. In this case, you must define a width for all columns because any columns without a defined width are sized using the 0px minimum and therefore will not be visible.

If the total of all column widths is less than the overall width of the component, then the columns will be sized as follows:

Any columns with a defined size range or with no defined size will be expanded wider. The excess width will be allocated among these "flex" columns evenly, except that no column with a defined range will exceed its defined maximum size. Any leftover width (for example, due to rounding) is given to the last column that has not exceeded its maximum size.
If all columns have a defined size or range, and after expanding to the maximum range there is still excess width, then that width will display as a gap between the right edge of the last column and the right edge of the grid component.

If all columns use percent sizes, then the following applies:

If the total of all column widths equals 100%, then the data source contents will exactly fit the component width.
If the total of all column widths is less than 100%, then a gap will display between the right edge of the last column and the right edge of the grid component.
If the total of all column widths is greater than 100%, then a horizontal scroll bar will be present on the grid.

It is possible to mix percents and pixels for different columns within the grid, and even within a single range. Each column will be sized according to the rules described above to determine the total column widths and therefore the overall grid display.

If the [ColumnWidth] tag is not present in the data source, or if it is blank for all columns, then the overall width of the grid is allocated equally to all columns.

Printing considerations

If you want to design the grid to support printing to PDF, then you must set the column widths so that all columns fit within the PDF page (as determined by the form-level PDF settings for size and orientation). You can use the separate [PDFColumnWidth] tag to set column widths specifically for use when generating a PDF. For more information, see Configuring a Formatted Grid component for printing to PDF.