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"
  height = "integer"
  width = "integer"
  autoWidth = "Yes" or "No"
  vSpace = "integer"
  hSpace = "integer"
  align = "value"
  query = "query_name"
  insert = "Yes" or "No"
  delete = "Yes" or "No"
  sort = "Yes" or "No"
  font = "column_font"
  fontSize = "size"
  italic = "Yes" or "No"
  bold = "Yes" or "No"
  textColor = "web color"
  href = "URL"
  hrefKey = "column_name"
  target = "URL_target"
  appendKey = "Yes" or "No"
  highlightHref = "Yes" or "No"
  onValidate = "javascript_function"
  onError = "text"
  gridDataAlign = "position"
  gridLines = "Yes" or "No"
  rowHeight = "pixels"
  rowHeaders = "Yes" or "No"
  rowHeaderAlign = "position"
  rowHeaderFont = "font_name"
  rowHeaderFontSize = "size"
  rowHeaderItalic = "Yes" or "No"
  rowHeaderBold = "Yes" or "No"
  rowHeaderTextColor = "web color"
  colHeaders = "Yes" or "No"
  colHeaderAlign = "position"
  colHeaderFont = "font_name"
  colHeaderFontSize = "size"
  colHeaderItalic = "Yes" or "No"
  colHeaderBold = "Yes" or "No"
  colHeaderTextColor = "web color"
  bgColor = "web color"
  selectColor = "web color"
  selectMode = "mode"
  maxRows = "number"
  notSupported = "text"
  pictureBar = "Yes" or "No"
  insertButton = "text"
  deleteButton = "text"
  sortAscendingButton = "text"
  sortDescendingButton = "text">
</cfgrid> 

See also

cfapplet, cfform, cfinput, cfselect, cfslider, cftextinput, cftree, cftreeitem

History

New in ColdFusion MX: ColdFusion does not use the rowHeaderWidth attribute. You can omit it.

Attributes

Attribute Req/Opt Default Description
name
Required
 
Name of grid element.
height
Optional
300
Height of grid control, in pixels.
width
Optional
300
Width of grid control, in pixels.
autoWidth
Optional; see description
No
  • Yes: sets column widths so that all columns display within grid width.
  • No: sets columns to equal widths. User can resize columns. Horizontal scroll bars are not available, because if you specify a column width and set autoWidth = "Yes", ColdFusion sets to this width, if possible.
vSpace
Optional
 
Vertical space above and below grid control, in pixels.
hSpace
Optional
 
Horizontal space to left and right of grid control, in pixels.
align
Optional
 
Alignment of the grid cell contents:
  • Top
  • Left
  • Bottom
  • Baseline
  • Texttop
  • Absbottom
  • Middle
  • Absmiddle
  • Right
query
Optional
 
Name of query associated with grid control.
insert
Optional
No
  • Yes: user can insert row data in grid. Takes effect only if selectmode="edit"
  • No
delete
Optional
No
  • Yes: user can delete row data from grid. Takes effect only if selectmode="edit"
  • No
sort
Optional
No
The sort button performs simple text sort on column. User can sort columns by clicking column head or by clicking sort buttons. Not valid with selectmode=browse.
  • Yes: sort buttons display on grid control
  • No
font
Optional
 
Font of column data in the grid control.
fontSize
Optional
 
Size of text in the grid control, in points.
italic
Optional
No
  • Yes: displays grid control text in italic
  • No
bold
Optional
No
  • Yes: displays grid control text in bold
  • No
textColor
Optional
Black
Color of text in grid control; hex or text.
Hex value or supported named color; see name list in the Usage section.
For a hex value, use the form "##xxxxxx", where x = 0-9 or A-F; use two pound signs or none.
For a list of the supported named colors, see cfchart.
href
Optional
 
URL o r query column name that contains a URL to hyperlink each grid cell with.
hrefKey
Optional
 
The query column to use for the value appended to the href URL of each cell, instead of the cell's value.
target
Optional
 
Target of href URL.
appendKey
Optional
Yes
  • Yes: When used with href, appends "GFGRIDKEY=" and the value of the cell to each cell's URL.
  • No
highlightHref
Optional
Yes
  • Yes: highlights links associated with a cfgrid with an href attribute value
  • No
onValidate
Optional
 
A JavaScript function to validate user input. The form object, input object, and input object value are passed to routine, which returns True if validation succeeds; False otherwise.
onError
Optional
 
A JavaScript function to execute if validation fails.
gridDataAlign
Optional
Left
  • Left: left-aligns data within column.
  • Right: right-aligns data within column.
  • Center: center-aligns data within column.
gridLines
Optional
Yes
  • Yes: enables row and column rules in grid control
  • No
rowHeight
Optional
 
Minimum row height, in pixels, of grid control. Used with cfgridcolumn type = "Image"; defines space for graphics to display in row.
rowHeaders
Optional
Yes
  • Yes: displays a column of numeric row labels in grid control
  • No
rowHeaderAlign
Optional
Left
  • Left: left-aligns data within row header
  • Right: right-aligns data within row header
  • Center: center-aligns data within row header
rowHeaderFont
Optional
 
Row label font.
rowHeaderFontSize
Optional
 
Row label text size in grid control, in points.
rowHeaderItalic
Optional
No
  • Yes: displays row label text in italic
  • No
rowHeaderBold
Optional
No
  • Yes: displays row label text in bold
  • No
rowHeaderTextColor
Optional
Black
Text color of grid control row headers.
  • Options: same as for textColor attribute
colHeaders
Optional; see description
Yes
  • Yes: displays column headers in grid control
  • No
colHeaderAlign
Optional
Left
  • Left
  • Right
  • Center
colHeaderFont
Optional
 
Font of column header in grid control.
colHeaderFontSize
Optional
 
Size of column header text in grid control, in points.
colHeaderItalic
Optional
No
  • Yes: displays column headers in italics
  • No
colHeaderBold
Optional
No
  • Yes: displays column headers in bold
  • No
colHeaderTextColor
Optional
 
Color of grid control column headers.
  • Options: same as for textColor attribute
bgColor
Optional
 
Background color of grid control.
  • Options: same as for textColor attribute
selectColor
Optional
 
Background color for a selected item.
  • Options: same as for textColor attribute
selectMode
Optional
Browse
Selection mode for items in grid control.
  • Edit: user can edit grid data. Selecting a cell opens the editor for the cell type.
  • Single: user selections are limited to selected cell.
  • Row: user selections automatically extend to the row that contains selected cell.
  • Column: user selections automatically extend to column that contains selected cell.
  • Browse: user can only browse grid data
maxRows
Optional
 
Maximum number of rows to display in grid.
notSupported
Optional
(See Description)
Text to display if page that contains Java applet-based cfform control is opened by a browser that does not support Java or has Java support disabled.
Default: "<b> Browser must support Java to view ColdFusion Java Applets</b>"
pictureBar
Optional
No
  • Yes: images for Insert, Delete, Sort buttons
  • No
insertButton
Optional
Insert
Insert button. Takes effect only if selectmode="edit".
deleteButton
Optional
Delete
Text of Delete button text. Takes effect only if selectmode="edit".
sortAscendingButton
Optional
A -> Z
Sort button text
sortDescendingButton
Optional
Z -> A
Sort button text

Usage

You can populate a cfgrid with data from a cfquery. If you do not specify any cfgridcolumn entries, ColdFusion generates a default set of columns, which includes each column in the query. A default header for each column is 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 the client to download a Java applet; therefore, this tag might be slightly slower than using an HTML form element or the cfinput tag to get the same information.

For this tag to work properly. the browser must be JavaScript-enabled.

This tag requires an end tag.

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 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):

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:

<cfloop index="ColName" list="#ColNameList#">
  <cfif IsDefined("form.#GridName#.#ColName#")>  
    <cfoutput><br>form.#GridName#.#ColName#:<br></cfoutput>
    
    <cfset Array_New = evaluate("form.#GridName#.#ColName#")>
    <cfset Array_Orig = evaluate("form.#GridName#.original.#ColName#")>
    <cfset Array_Action = evaluate("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 attribute:

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.

Example

<!--- This shows cfgrid, cfgridcolumn, cfgridrow, and cfgridupdate --->
<!--- use a query to show the useful qualities of cfgrid --->
<!--- If the gridEntered form field has been tripped, perform gridupdate 
on table specified in database. Using default value keyonly = yes 
lets us change only information that differs from previous grid --->
<cfif IsDefined("form.gridEntered") is True>
  <cfgridupdate grid = "FirstGrid" dataSource = "cfsnippets" 
  tableName = "CourseList" keyOnly = "Yes">
</cfif>
<!--- query the database to fill up the grid --->
<cfquery name = "GetCourses" dataSource = "cfsnippets">
SELECT Course_ID, Dept_ID, CorNumber,
     CorName, CorLevel, CorDesc
FROM  CourseList
ORDER by Dept_ID ASC, CorNumber ASC
</cfquery>

<html>
<head>
<title>cfgrid Example</title>
</head>
<body>
<h3>cfgrid Example</h3>
<I>Try adding a course to the database, and then deleting it.</i>
<!--- call the cfform to allow us to use cfgrid controls --->
<cfform action = "cfgrid.cfm">
<!--- We include Course_ID in cfgrid, but do not allow selection or display --->
<!--- cfgridcolumn tags are used to change the parameters involved in 
displaying each data field in the table--->
<cfgrid name = "FirstGrid" width = "450" 
  query = "GetCourses" insert = "Yes" delete = "Yes" sort = "Yes" 
  font = "Tahoma" bold = "No" italic = "No" appendKey = "No" highlightHref = "No" 
  gridDataAlign = "LEFT" gridLines = "Yes"rowHeaders = "Yes" 
  rowHeaderAlign = "LEFT"   rowHeaderItalic = "No" rowHeaderBold = "No" 
  colHeaders = "Yes" colHeaderAlign = "LEFT"
  colHeaderItalic = "No" colHeaderBold = "No" 
  selectColor = "Red" selectMode = "EDIT" pictureBar = "No" 
  insertButton = "To insert" deleteButton = "To delete" 
  sortAscendingButton = "Sort ASC" sortDescendingButton = "Sort DESC">
  <cfgridcolumn name = "Course_ID" dataAlign = "LEFT" 
    bold = "No" italic = "No" select = "No" display = "No" 
    headerBold = "No" headerItalic = "No">
  <cfgridcolumn name = "Dept_ID" header = "Department"
    headerAlign = "LEFT" dataAlign = "LEFT" 
    bold = "Yes" italic = "No" select = "Yes" display = "Yes" 
    headerBold = "No" headerItalic = "Yes">
  <cfgridcolumn name = "CorNumber" header = "Course ##"
    headerAlign = "LEFT" dataAlign = "LEFT" 
    bold = "No" italic = "No" select = "Yes" display = "Yes" 
    headerBold = "No" headerItalic = "No">
  <cfgridcolumn name = "CorName" header = "Name" 
    headerAlign = "LEFT" dataAlign = "LEFT" font = "Times" bold = "No" 
    italic = "No" select = "Yes" display = "Yes" headerBold = "No" 
    headerItalic = "No">
  <cfgridcolumn name = "CorLevel" header = "Level" 
    headerAlign = "LEFT" dataAlign = "LEFT" 
    bold = "No" italic = "No" select = "Yes" display = "Yes"
    headerBold = "No" headerItalic = "No">
  <cfgridcolumn name = "CorDesc" header = "Description"
    headerAlign = "LEFT" dataAlign = "LEFT" 
    bold = "No" italic = "No" select = "Yes" display = "Yes" 
    headerBold = "No" headerItalic = "No">
</cfgrid>
</cfform>
</body>
</html>
...

Comments