RackForms v7.7.3
data grid
Site Tag Line
Latest Release: Build 942 - April 3, 2021
Contact Us  Purchase Options Purchase Options Contact Us

Top Link
Text Data Grid

In Brief: Creates a data grid module item on the form page. In other words, the Data Grid element allows us to quickly add many form field elements to a page in a table or grid format.

Dependencies: none.

Hints & Tricks: Knowing how the data grid names elements is key to implementing them in your forms. The rule is in HTML the name property of the items are created by taking the RackForms Name/Value of the item and adding an underscore, the row index number, a second underscore, followed by the column index number.

For example, if we had a data grid with a Name/Value of entryTable, the top left most element will be named:


The next element to that ones right will be:


That is, the first 0 is the row number, the 1 is the column index. It's important to note numbering always starts with 0, not 1. That is, the first row and first column index is 0, not 1.

Knowing this naming conventionallows us to pluck sprcific values out of the grid for display, or use in items like SQL+

Saving To Your Database Using SQL+

The fastest way to save a datagrid to your database is to use the SQL+ Automator. Doing so allows us to quickly add all of the needed database fields and SQL+ item logic the data grid needs to operate properly.

Populating Existing Values

If you've saved your grid data to a custom database table, use the Right Click > SQL+ Automator Populate All Pages option to quickly build the modules needed to populate the grid data back to it's originally submitted state.


Basic Attributes


The text your element displays.

As of Build 701, this field accepts the standard RackForms 2 token set for field labels. Please see the in-app tooltip for exact values to use.

As of Build 705, this field now accepts the standard RackForms 2 token set for Section/Headline Text and Body Copy elements. That is, we used to only be able to use the @{value} token, as can now use F{}, S{} and so on.

The 'new' RackForms standard tokens will, by default, transform line breaks into HTML br tags. This is very handy when we want to display a text area to a user where such line breaks have been added. This ensures the typed value matches, as closely as possible, the display.

Also in Build 705 is the 'raw' field token: FR{field_name}. This token was created because by default, when we use a F{} token for say, text1, we are actually creating the following code:

<?php if(isset($_SESSION['qs']["{$_SESSION['entry_key']}"]['text1'])) { echo "{$_SESSION['qs']["{$_SESSION['entry_key']}"]['text1']}"; }?>

That is, a full (but inline) PHP block. This makes it impossible to create custom logic in a Body Copy or Section Text block, as the open and close PHP blocks break any such custom code.

Thus, the raw token only places the raw field value into the text data, nothing more. The same text1 item now looks like:


That is, no PHP block, and no isset().


This element is set by RackForms automatically, though it is recommended to change this value if you decide to display Javascript validation messages, as the text of the error is the value of this field. This value is displayed by default if no Label attribute is assigned to the element. For technical users, this element name is in fact the same as the Name/Value html form attribute of this element.


By default is assigned the same value as the Name/Value element, though you can change this to a more field specific value. Not necessary for most applications. For technical users, this is the id attribute of the field item.

Wrapper Class Name

Every field element in RackForms is wrapped in either a LI or DIV element for Sortable or Free Form page types, respectively. When you place a value in this box it becomes the class="" attribute for that wrapper. Because a wrapper encompass both the input element and wrapper, you can use this value to show and hide sections of your form.

Conditional Processing

Field Initially Visible?

Determines if this field is initially visible to your forms users.

This Form Field...

This field and the next allows us to create a condition on the visibility of the field. We enter the Name/Value of a form field in this box, and in the next, the value we check against. If the value matches, we show the field. Please note this only works as a method to show a field, not hide. That is, we still uncheck the Field initialy Visible to hide the field, these options simply allow us to show the field based on a condition from another form field. Please note this logic works across pages.

Has This Value...

The value we check to determine a fields visibility. This must exactly match the value the form field will contain. This field is also dynamic, which means we can use standard RackForms tokens to check against a dynamic value at runtime.


Data Grid

Field Type

The type of form field item we wish to present to the user. These values can be overridden on a per-column basis as described below.

Input Item Field Width

The width of the form field item.

Data Grid Total Width

The total width of the data grid item.

Row Column Width

The width of the column rows.


Any border to apply to the grid.

Cell Padding

The padding of each row.

Cell Spacing

The cell spacing of the grid.

Item JavaScript Event Code

Code added to this text area will be applied directly to each form element in the grid. Of course we recommend this be JavaScript event code such as:


But it would be style or any other code as well.

Alternate Line Colors

Whether or not to apply alternating row colors to the grid. Can help with larger items.

Alternate Line Color

The actual color is using Alternate Line Colors.

Column Header Background Color

The background color of the header.

Row Text Color

The color of the row text items.

Column Text Color

The color of the text.

Row Alignment

The alignment of the row items.

Column Alignment

The column alignment of the gird items.

Row Font Weight

The font weight of the row items.

Column Font Weight

The font weight of the column items.

Data Grid Rows

The slider determines how many rows the grid has. As you'll notice this item updates the input fields below automatically.

Data Grid Columns

The number of columns the grid contains.

Column n Header

This is the text to use for that column.

To the left of this box is the field override select. Choose from any of the values to make that column this field type.

Below both is the Default Value / Select Options box. In this field we place the value we want the text/textarea/password fields default value to be, and for select, radio, and checkbox items, the list of items ther user can choose from.

Row n Label

The text to use for the row. Please note that as of Build 747 we can use a double pipe as in: || to make this row a subhead. A subhead row simply contains text for the row label and nothing else. This can be used to break larger forms into smaller bits.

Please note a double pipe is not a special character, it's simply two pipe characters, which on WIndows keyboards can be found just below Backspace, and on Mac keyboard just below Delete.

So many features, So little time