CFGRID |
Description Used within 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.
Category Forms tags
Syntax
    <cfgrid
       name = "name"
       format = "applet" or "Flash" or "xml"
       height = "integer"
       width = "integer"
       query = "query_name"
       selectMode = "mode"
       insert = "yes" or "no"
       delete = "yes" or "no"
       font = "column_font"
       fontSize = "size"
       italic = "yes" or "no"
       bold = "yes" or "no"
       textColor = "web color"
       gridLines = "yes" or "no"
       rowHeight = "pixels"
       colHeaders = "yes" or "no"
       colHeaderFont = "font_name"
       colHeaderFontSize = "size"
       colHeaderItalic = "yes" or "no"
       colHeaderBold = "yes" or "no"
       colHeaderTextColor = "web color"
       bgColor = "web color"
       maxRows = "number"
       The following works in Flash format only
       style= "style specification"
       enabled = "Yes" or "No"
       visible = "Yes" or "No"
       toolTip = "Tip text"
    onChange = "ActionScript"
       The following work in applet and XML format only
    autoWidth = "yes" or "no"
       vSpace = "integer"
       hSpace = "integer"
       align = "value"
       sort = "yes" or "no"
       href = "URL"
       hrefKey = "column_name"
       target = "URL_target"
       appendKey = "yes" or "no"
       highlightHref = "yes" or "no"
       onValidate = "javascript_function"
       onError = "text"
       gridDataAlign = "position"
       rowHeaders = "yes" or "no"
       rowHeaderAlign = "position"
       rowHeaderFont = "font_name"
       rowHeaderFontSize = "size"
       rowHeaderItalic = "yes" or "no"
       rowHeaderBold = "yes" or "no"
       rowHeaderTextColor = "web color"
       colHeaderAlign = "position"
       selectColor = "web color"
       notSupported = "text"
       pictureBar = "yes" or "no"
       insertButton = "text"
       deleteButton = "text"
       sortAscendingButton = "text"
       sortDescendingButton = "text">
    zero or more cfgridcolumn and cfgridrow tags
    </cfgrid>
See also cfapplet, cfcalendar, cfgridcolumn, cfgridrow, cfgridupdate, cfform, cfformgroup, cfformitem, cfgrid, cfinput, cfselect, cfslider, cftextarea, cftree
History ColdFusion MX 7: Added the format attribute and support for Flash and XML output. Added enabled, onChange, style, tooltip, and visible attributes (Flash format only). ColdFusion MX: Changed the rowHeaderWidth attribute: ColdFusion does not use the rowHeaderWidth attribute. You can omit it.
Note: | In XML format, ColdFusion MX passes all attributes to the XML. The supplied XSLT skins do not handle or display XML format grids, but do display applet and Flash format grids.
Usage 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 plugin installed, the system might also have to download an updated Java plugin 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.
Note: | If you specify Flash format for this tag in an HTML format form, and you do not specify height and width attributes, Flash takes up more than the remaining visible area on the screen. If any other output follows the grid, including any form controls, users must scroll to see it. Therefore, if you follow a Flash grid in an HTML form with additional output, specify height and width values.
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: A column for each column in the query. A default header for each column, created by replacing hyphen or underscore characters in the table column name with spaces. The first character, and any character after a space, are changed to uppercase; all other characters are lowercase. This tag requires an end tag.
Note: | Clicking the submit button while editing a grid cell occasionally causes the cell changes to be lost. To ensure that changes are submitted properly, Macromedia recommends that after user updates data in a cell, they click another cell before submitting the form.
How data is returned from cfgrid This tag returns data by setting form variables in the data submitted to the form's action page, as an HTML form control does. 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 data, returned from simple select operations Complex data, returned from insert, update and delete operations
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 variable(s): 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>
Using the href attribute 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: If you specify a hrefKey attribute, selection is the field value of the column specified by the attribute. Otherwise, it is one of the following: If selectMode="Single", selection is the value of the column clicked. If selectMode="Row", selection is a comma-delimited list of column values in the clicked row, beginning with the value of the first cell in the row. If selectMode="Column", selection is a comma-delimited list of row values in the clicked column, beginning with the value of the first cell in the column.
Example 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>

NAME |
| Required; All
Name of the grid control.

FORMAT |
| Optional; All
Default value: "applet" applet: generates a Java applet. Flash: generates a Flash grid control. xml: generates an XML representation of the grid. 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.

HEIGHT |
| Optional; All
Default value: "300 (applet only)" Height of the control, in pixels. If you omit the attribute in Flash format, the grid sizes automatically..

WIDTH |
| Optional; All
Default value: "300 (applet only)" Width of the control, in pixels. If you omit the attribute in Flash format, the grid sizes automatically.

QUERY |
| Optional; All
Name of the query associated with the control.

SELECTMODE |
| Optional; All
Default value: "Applet format: Browse;" Default value: "Flash format: Row" Selection mode for items in the control. Edit: user can edit grid data. Selecting a cell opens the editor for the cell type. Row: user selections automatically extend to the row that contains selected cell. The following are used in applet format only; Flash interprets these as Row: Single: user selections are limited to selected cell. Column: user selections automatically extend to column that contains selected cell. Browse: user can only browse grid data.

FONT |
| Optional; All
Font of text.

FONTSIZE |
| Optional; All
Size of text, in points.

ITALIC |
| Optional; All
Default value: "no" yes: displays text in italics. no

BOLD |
| Optional; All
Default value: "no" yes: displays text in bold. no

TEXTCOLOR |
| Optional; All
Default value: "Black" 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.

SELECTCOLOR |
| Optional; All
Background color for a selected item. Options: same as for textColor attribute

GRIDLINES |
| Optional; All
Default value: "yes" yes: enables row and column rules. no

ROWHEIGHT |
| Optional; All
Minimum row height, in pixels. Used with cfgridcolumn type = "Image"; defines space for graphics to display in row.

COLHEADERS |
| Optional; All
Default value: "yes" yes: displays column headers. no

COLHEADERFONT |
| Optional; All
Font of column header.

COLHEADERFONTSIZE |
| Optional; All
Size of column header text, in points.

COLHEADERITALIC |
| Optional; All
Default value: "no" yes: displays column headers in italics. no

COLHEADERBOLD |
| Optional; All
Default value: "no" yes: displays column headers in bold. no

COLHEADERTEXTCOLOR |
| Optional; All
Color of column headers. Options: same as for textColor attribute.

BGCOLOR |
| Optional; All
Background color of the control. Options: for applet format, same as for textColor attribute; for Flash format, must be a hexadecimal value. Flash format only: to specify background colors for alternating rows, separate the two colors with a comma.

MAXROWS |
| Optional; All
Maximum number of rows to display in the grid.

STYLE |
| Optional;
| Flash
Must be a style specification in CSS format. Ignored for type="text".

ENABLED |
| Optional;
| Flash
Default value: "Yes" Default value: "Flash format only: Boolean value specifying whether the control is enabled. A disabled control appears in light gray."

VISIBLE |
| Optional;
| Flash
Default value: "Yes" Default value: "Flash format only: Boolean value specifying whether to show the control. Space that would be occupied by an invisible control is blank."

TOOLTIP |
| Optional;
| Flash
Default value: "Flash format only: text to display when the mouse pointer hovers over the control."

ONCHANGE |
| Optional;
| Flash
Default value: "ActionScript to run when the control changes due to user action in the control."

AUTOWIDTH |
| Optional;
| applet
Default value: "no" yes: sets column widths so that all columns display within the grid width. Widths are equal or the proportions are determined by the relative cfgridcolumn width attribute values. Horizontal scroll bars are not available. no: sets columns to equal widths or the values specified in the cfgridcolumn width attributes.

VSPACE |
| Optional;
| applet
Vertical space above and below the control, in pixels.

HSPACE |
| Optional;
| applet
Horizontal space to the left and right of the control, in pixels.

ALIGN |
| Optional;
| applet
Alignment of the grid cell contents: Top Left Bottom Baseline Texttop Absbottom Middle Absmiddle Right

INSERT |
| Optional;
| applet
Default value: "no" yes: users can insert row data in the grid; takes effect only if selectmode="edit". no

DELETE |
| Optional;
| applet
Default value: "no" yes: users can delete row data from the grid; takes effect only if selectmode="edit". no

SORT |
| Optional;
| applet
Default value: "no" Adds sort buttons to perform simple text sorts on a user-selected column: yes: put sort buttons on the grid control. no Independent of this setting, users can sort columns by clicking the column head. If selectMode="browse", the table cannot be sorted.

HREF |
| Optional;
| applet
URL or name of a query column that contains URLs to hyperlink each grid cell with.

TARGET |
| Optional;
| applet
The target frame or window in which to display the href URL; for example, "_blank".

APPENDKEY |
| Optional;
| applet
Default value: "yes" yes: when used with href, appends "CFGRIDKEY=" and information about the selected items. For details see "Using the href attribute". no

HREFKEY |
| Optional;
| 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.

HIGHLIGHTHREF |
| Optional;
| applet
Default value: "yes" yes: highlights links associated with an href attribute value. no

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.

ONERROR |
| Optional;
| applet
A JavaScript function to execute if validation fails.

GRIDDATAALIGN |
| Optional;
| applet
Default value: "Left" Left: left-aligns data within the column. Right: right-aligns data within the column. Center: centers data within the column.

ROWHEADERS |
| Optional;
| applet
Default value: "yes" yes: displays a column of numeric row labels. no

ROWHEADERALIGN |
| Optional;
| applet
Default value: "Left" Left: left-aligns the row header text. Right: right-aligns the row header text. Center: centers the row header text.

ROWHEADERFONT |
| Optional;
| applet
Font for the row labels.

ROWHEADERFONTSIZE |
| Optional;
| applet
Text size of the row labels, in points.

ROWHEADERITALIC |
| Optional;
| applet
Default value: "no" yes: displays row label text in italics. no

ROWHEADERBOLD |
| Optional;
| applet
Default value: "no" yes: displays row label text in bold. no

ROWHEADERTEXTCOLOR |
| Optional;
| applet
Default value: "Black" Text color of grid control row headers. Options: same as for the textColor attribute.

COLHEADERALIGN |
| Optional;
| applet
Default value: "Left" Left: left-aligns the column header text. Right: right-aligns the column header text. Center: centers the column header text.

NOTSUPPORTED |
| Optional;
| applet
Default value: "(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>"

PICTUREBAR |
| Optional;
| applet
Default value: "no" yes: puts images (and no text) on the Insert, Delete, and Sort buttons. no: puts text (and no images) on the Insert, Delete, and Sort buttons.

INSERTBUTTON |
| Optional;
| applet
Default value: "Insert" Insert button text; takes effect only if selectmode="edit".

DELETEBUTTON |
| Optional;
| applet
Default value: "Delete" Delete button text; takes effect only if selectmode="edit".

SORTASCENDINGBUTTON |
| Optional;
| applet
Default value: "A -> Z" Sort button text.

SORTDESCENDINGBUTTON |
| Optional;
| applet
Default value: "Z -> A" Sort button text.