Home > Form Elements > Data Grid
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 FormBoss 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:
entryTable_0_0
The next element to that ones right will be:
entryTable_0_1
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 convention makes it possible to add the proper SQL+ code, for example.
Speaking of which, the fastest way to add data grid SQL+ code to your form is to just use the SQL+ Automator system. Doing so allows us to quickly add all of the needed database fields and SQL+ item logic the data grid needs to operate properly.
Options/Properties
Basic Attributes
Label
The text your button displays.
As of Build 701, this field accepts the standard FormBoss 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 FormBoss 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' FormBoss 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:
$_SESSION['qs']["{$_SESSION['entry_key']}"]['text1']
That is, no PHP block, and no isset().
Name/Value
This element is set by FormBoss 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.
id
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 FormBoss 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.
Data Grid
Field Type
The type of form field item we wish to present to the user. As of FormBoss 3 Build 747 this only allows text fields, though will be expanded at a later time.
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.
Border
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:
onkeyup="alert('hi');"
But it would be style or any other code as well.
Alternate Line Colors
Weather 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.
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.