Used in the cfform tag. Puts a grid control (a table of data) in a ColdFusion form. To specify grid columns and row data, use the cfgridcolumn and cfgridrow tags, or use the query attribute, with or without cfgridcolumn tags.
<cfgrid name="name
" align="value
" appendKey="yes|no" autoWidth="yes|no" bgColor="web color
" bind="bind expression
" bindOnLoad="yes|no" bold="yes|no" colHeaderAlign="left|right|center" colHeaderBold="yes|no" colHeaderFont="font_name
" colHeaderFontSize="size
" colHeaderItalic="yes|no" colHeaders="yes|no" colHeaderTextColor="web color
" delete="yes|no" deleteButton="text
" enabled="yes|no" font="column_font
" fontSize="size" format="applet|Flash|html|xml" gridDataAlign="left|right|center" gridLines="yes|no" height="integer
" highlightHref="yes|no" href="URL
" hrefKey="column_name
" hSpace="integer
" insert="yes|no" insertButton="text
" italic="yes|no" maxRows="number
" notSupported="text
" onBlur="ActionScript
" onChange="ActionScript or bind expression
" onError="JavaScript function name
" onFocus="ActionScript function
" onValidate="JavaScript function name
" pageSize="number of rows
" pictureBar="yes|no" preservePageOnSort="yes|no" query="query name
" rowHeaderAlign="left|right|center" rowHeaderBold="yes|no" rowHeaderFont="font name
" rowHeaderFontSize="size
" rowHeaderItalic="yes|no" rowHeaders="yes|no" rowHeaderTextColor="web color
" rowHeight="pixels
" selectColor="web color
" selectMode="mode
" selectOnLoad="yes|no" sort="yes|no" sortAscendingButton="text
" sortDescendingButton="text
" stripeRowColor="web color
" stripeRows="yes|no" style= "style specification
" target="URL_target
" textColor="web color
" tooltip="text
" visible="yes|no" vSpace="integer
" width="integer
">zero or more cfgridcolumn and cfgridrow tags
</cfgrid>
cfajaximport, cfapplet, cfcalendar, cfgridcolumn, cfgridrow, cfgridupdate, cfform, cfformgroup, cfformitem, cfinput, cfselect, cfslider, cftextarea, cftree, "Using HTML format grids" in the ColdFusion Developer's Guide
ColdFusion 8: Added support for HTML format grids, including the html value of the format attribute and the following attributes: bind, bindOnLoad, pageSize, preservePageOnSort, stripeRows, stripeRowColor.
ColdFusion MX 7.01: Added support for the onBlur and onFocus events.
ColdFusion MX 7:
ColdFusion MX: Changed the rowHeaderWidth attribute: ColdFusion does not use the rowHeaderWidth attribute. You can omit it.
Attribute |
Req/Opt; formats |
Default |
Description |
---|---|---|---|
name |
Required; all |
|
Name of the grid control. |
align |
Optional; applet |
|
Alignment of the grid cell contents:
|
appendKey |
Optional; HTML, applet |
yes |
|
autoWidth |
Optional; HTML, applet |
no |
|
bgColor |
Optional; all |
|
Background color of the control. For most formats, can be a hexidecimal format or a named color. For a hexadecimal value, use the form "##xxxxxx", where x = 0-9 or A-F; use two number signs or none. For a list of the supported named colors, see cfchart.
|
bind |
Optional; HTML |
A bind expression used to fill the contents of the grid. Cannot be used with the query attribute. For more information, see "Binding data to form fields" in "Using Ajax Data and Development Features" in the ColdFusion Developer's Guide. |
|
bindOnLoad |
Optional; HTML |
yes |
Ignored if there is no bind attribute. For more information, see "Using the bindOnLoad attribute" in the ColdFusion Developer's Guide. |
bold |
Optional; all |
no |
|
colHeaderAlign |
Optional; applet |
left |
|
colHeaderBold |
Optional; all |
no |
|
colHeaderFont |
Optional; all |
|
Font of column header. |
colHeaderFontSize |
Optional; all |
|
Size of column header text, in points. |
colHeaderItalic |
Optional; all |
no |
|
colHeaders |
Optional; Applet, Flash |
yes |
|
colHeaderTextColor |
Optional; all |
|
Color of column headers.
|
delete |
Optional; HTML, applet |
no |
|
deleteButton |
Optional; HTML, applet |
Delete |
Text for the Delete button; takes effect only if selectmode="edit". |
enabled |
Optional; Flash |
yes |
Flash format only: Boolean value that specifies whether the control is enabled. A disabled control appears in light gray. |
font |
Optional; all |
|
Font of text. |
fontSize |
Optional; all |
|
Size of text, in points. |
format |
Optional; all |
applet |
In XML format forms, includes the generated XML in the form. In HTML format forms, puts the XML in a string variable with the name specified by the name attribute. |
gridDataAlign |
Optional; applet |
left |
|
gridLines |
Optional; applet, Flash |
yes |
|
height |
Optional; all |
300 (applet only) |
Height of the control, in pixels. If you omit the attribute in Flash format, the grid sizes automatically. |
highlightHref |
Optional; applet |
yes |
|
href |
Optional; HTML,. applet |
|
URL or name of a query column that contains URLs to hyperlink each grid cell with. |
hrefKey |
Optional; HTML,. applet |
|
A query column to use for the value appended to the href URL of each cell, if appendKey="True". If you use cfgridcolumn tags, the column must be specified in one of these tags. |
hSpace |
Optional; applet |
|
Horizontal space to the left and right of the control, in pixels. |
insert |
Optional; applet |
no |
|
insertButton |
Optional; applet |
Insert |
Text for the Insert button; takes effect only if selectmode="edit". |
italic |
Optional; all |
no |
|
maxRows |
Optional; all |
|
Maximum number of rows to display in the grid. |
notSupported |
Optional; applet |
See Description |
Text to display if the browser does not support Java or has Java support disabled. Default: "<b> Browser must support Java to view ColdFusion Java Applets</b>" |
onBlur |
Optional, Flash |
|
ActionScript that runs when the grid loses focus. |
onChange |
Optional; HTML, Flash |
|
Flash format: ActionScript to run when the control changes due to user action in the control. HTML format: Required for HTML format grids that specify a bind attribute and a selectMode value of edit. A bind expression that calls a CFC method, JavaScript function, or URL to update the data source. |
onError |
Optional; HTML, applet |
|
In HTML format grids, name of a JavaScript function to execute if an error occurs. In applet format grids, name of a JavaScript function to execute if validation fails. |
onFocus |
Optional, Flash |
|
ActionScript that runs when the calendar gets focus. |
onValidate |
Optional; applet |
|
A JavaScript function to validate user input. The form object, input object, and input object value are passed to the function, which must return true if validation succeeds; false otherwise. |
pageSize |
Optional; HTML |
10 |
The number of rows to display per page for a dynamic grid. If the number of available rows exceeds the page size, the grid displays only the specified number of entries on a single page, and the user navigates between pages to show all data. The grid retrieves data for each page only when it is required for display. This attribute is ignored if you specify a query attribute. |
pictureBar |
Optional; applet |
no |
|
preservePageOnSort |
Optional; HTML |
no |
Specifies whether to display the page with the current page number, or display page 1, after sorting (or resorting) the grid. If this attribute is yes, selections are preserved when the grid sorts. |
query |
Optional; all |
|
Name of the query associated with the control. Cannot be used with the bind attribute. |
rowHeaderAlign |
Optional; applet |
left |
|
rowHeaderBold |
Optional; applet |
no |
|
rowHeaderFont |
Optional; applet |
|
Font for the row labels. |
rowHeaderFontSize |
Optional; applet |
|
Text size of the row labels, in points. |
rowHeaderItalic |
Optional; applet |
no |
|
rowHeaders |
Optional; applet |
yes |
|
rowHeaderTextColor |
Optional; applet |
black |
Text color of grid control row headers.
|
rowHeight |
Optional; Applet, Flash, XML |
|
Minimum row height, in pixels. Used with cfgridcolumn type = "Image"; defines space for graphics to display in row. |
selectColor |
Optional; all |
|
Background color for a selected item.
|
selectMode |
Optional; all |
Applet format: Browse; HTML, Flash format: Row |
Selection mode for items in the control.
The following are used in applet format only; HTML and Flash formats interpret these as Row:
|
selectOnLoad |
Optional; HTML |
yes |
|
sort |
Optional; applet |
no |
Adds sort buttons to perform simple text sorts on a user-selected column:
Independent of this setting, users can sort columns by clicking the column head. If selectMode="browse", the table cannot be sorted. |
sortAscendingButton |
Optional; applet |
A > Z |
Text for the Sort button. |
sortDescendingButton |
Optional; applet |
Z > A |
Text for the Sort button. |
stripeRowColor |
Optional; HTML |
|
The color to use for one of the alternating stripes. The bgColor setting determines the other color. |
stripeRows |
Optional; HTML |
no |
Boolean value that indicates whether to make the rows stripes in alternating colors. |
style |
Optional; Flash |
Must be a style specification in CSS format. Ignored for type="text". |
|
target |
Optional; HTML, applet |
|
The target frame or window in which to display the href URL; for example, "_blank". |
textColor |
Optional Flash, applet |
|
Color of text. Can be a hexadecimal value or a named color. For a hexadecimal value, use the form "##xxxxxx", where x = 0-9 or A-F; use two number signs or none. For a list of the supported named colors, see cfchart. |
tooltip |
Optional; Flash |
|
Flash format only: text to display when the mouse pointer hovers over the control. |
visible |
Optional; Flash |
yes |
Flash format only: Boolean value that specifies whether to show the control. Space that would be occupied by an invisible control is blank. |
vSpace |
Optional; applet |
|
Vertical space above and below the control, in pixels. |
width |
Optional; all |
300 (applet only) |
Width of the control. In Flash and applet format, must be a number of pixels. In HTML format, can be in any valid CSS measurement unit, and a numeric-only value specifies pixels. If you omit the attribute in Flash or HTML format; the grid sizes automatically. |
Most of the following paragraphs describe grid features that apply to all, or at least two, grid formats. For information that is specific to Flash forms, see "Creating Forms in Flash" in the ColdFusion Developer's Guide. For information that is specific to HTML format grids, see "Using HTML format grids" in the ColdFusion Developer's Guide.
This tag must be in a cfform tag block.
An applet format grid requires the client to download a Java applet. Also, if the client does not have an up-to-date Java plug-in installed, the system might also have to download an updated Java plug-in to display the an applet format grid. A Flash format grid generates a Flash control, and can be embedded in an HTML format cfform tag. For this tag to work properly in either Flash or applet format, the browser must also be JavaScript-enabled.
You can populate a cfgrid with data from a cfquery. If you do not specify any cfgridcolumn tags in the cfgrid body, ColdFusion generates a grid with the following:
This tag requires an end tag.
Returning cfgrid data to the action page
The following information applies to all cfgrid formats. Also, HTML format grids can dynamically get data by using a bind expression. For more information, see "Using HTML format grids" in the ColdFusion Developer's Guide.
When a user submits a form, the cfgrid tag sends information about user actions by setting form variables in the data submitted to the form's action page. Because the data can vary, depending on the tag's SelectMode attribute value, the form variables that are returned also vary depending on this value.
In general, the data returned falls into one of these categories:
Simple selection data (SelectMode = Single, Column, or Row)
The data that form variables return to the cfform's action page contains information about which cells the user selected. In general, ColdFusion makes this data available in the action page, as ColdFusion variables in the Form scope, with the naming convention form.#GridName#.#ColumnName#.
Each SelectMode returns these form variables:
SelectMode="single" form.#GridName#.#ColumnName# = "SelectedCellValue" SelectMode="column" form.#GridName#.#ColumnName# = "ValueOfCellRow1, ValueOfCellRow2, ValueOfCellRowN" SelectMode="row" form.#GridName#.#Column1Name# = "ValueOfCellInSelectedRow" form.#GridName#.#Column2Name# = "ValueOfCellInSelectedRow" form.#GridName#.#ColumnNName# = "ValueOfCellInSelectedRow"
Complex update data (SelectMode = Edit)
The grid returns a large amount of data, to inform the action page of inserts, updates, or deletes that the user made to the grid. In most cases, you can use the cfgridupdate tag to automatically gather the data from the form variables; the tag collects data, writes SQL calls, and updates the data source.
If you cannot use cfgridupdate (if, for example, you must distribute the returned data to more than one data source), you must write code to read form variables. In this mode, ColdFusion creates the following array variables in the Form scope for each cfgrid:
form.#GridName#.#ColumnName# form.#GridName#.original.#ColumnName# form.#GridName#.RowStatus.Action
Each table row that contains an update, insert, or deletion has a parallel entry in each of these arrays. To view all the information for all the changes, you can traverse the arrays, as in this example. To make it work with a cfgrid on a submitted cfform, set the GridName variable to the name of the grid and the ColNameList to a list of the grid columns.
<cfloop index="ColName" list="#ColNameList#"> <cfif IsDefined("form.#GridName#.#ColName#")> <cfoutput><br>form.#GridName#.#ColName#:<br></cfoutput> <cfset Array_New = form.[#GridName#][#ColName#]> <cfset Array_Orig = form[#GridName#]['original'][#ColName#]> <cfset Array_Action = form[#GridName#]RowStatus.Action> <cfif NOT IsArray(Array_New)> <b>The form variable is not an array!</b><br> <cfelse> <cfset size = ArrayLen(Array_New)> <cfoutput> Result Array Size is #size#.<br> Contents:<br> </cfoutput> <cfif size IS 0> <b>The array is empty.</b><br> <cfelse> <table BORDER="yes"> <tr> <th>Loop Index</TH> <th>Action</TH> <th>Old Value</TH> <th>New Value</TH> </tr> <cfloop index="LoopCount" from="1" to=#size#> <cfset Val_Orig = Array_Orig[#LoopCount#]> <cfset Val_New = Array_New[#LoopCount#]> <cfset Val_Action = Array_Action[#LoopCount#]> <cfoutput> <tr> <td>#LoopCount#</td> <td>#Val_Action#</td> <td>#Val_Orig#</td> <td>#Val_New#</td> </tr> </cfoutput> </cfloop> </table> </cfif> </cfif> <cfelse> <cfoutput>form.#GridName#.#ColName#: NotSet!</cfoutput><br> </cfif> </cfloop>
When specifying a URL with grid items using the href attribute, the selectMode attribute value determines whether the appended key value is limited to one grid item or extends to a grid column or row. When a user clicks a linked grid item, a cfgridkey variable is appended to the URL, in this form:
http://myserver.com?cfgridkey=selection
If the appendKey attribute is set to no, no grid values are appended to the URL.
The value of selection is determined by the value of the selectMode and attribute:
When you use an href attribute, you can also specify a target attribute with any of the standard HTML target specifiers, _blank, _parent, _self, and _top, or with a specific frame name.
The following example creates a Flash form that displays a set of available courses from the CourseList table in the cfdocexamples database. For more complex examples that use the cfgrid tag, see cfgridcolumn, cfgridrow, and cfgridupdate.
<!--- Query the database to fill up the grid. ---> <cfquery name = "GetCourses" dataSource = "cfdocexamples"> SELECT Course_ID, Dept_ID, CorNumber, CorName, CorLevel FROM CourseList ORDER by Dept_ID ASC, CorNumber ASC </cfquery> <h3>cfgrid Example</h3> <i>Currently available courses</i> <!--- cfgrid must be inside a cfform tag. ---> <cfform> <cfgrid name = "FirstGrid" format="Flash" height="320" width="580" font="Tahoma" fontsize="12" query = "GetCourses"> </cfgrid> </cfform>