cfgrid

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.

Forms tags

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

cfgridcolumn, cfgridrow, cfgridupdate, cfapplet, cfform, cfinput, cfselect, cfslider, cftextinput, cftree, cftreeitem

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

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

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.

cfgrid

View comments on LiveDocs