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:
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 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.
Options/Properties
Basic Attributes
Label
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:
$_SESSION['qs']["{$_SESSION['entry_key']}"]['text1']
That is, no PHP block, and no isset().
Name/Value
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.
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 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.
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
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.