Description
Used with the cfgrid tag in a cfform. Formats a column and optionally populates the column from a query. The font and alignment attributes used in cfgridcolumn override global font or alignment settings defined in cfgrid.
Category
Syntax
autoExpand = "yes|no" |
Note: You can specify this tag's attributes in an attributeCollection attribute whose value is a structure. Specify the structure name in the attributeCollection attribute and use the tag's attribute names as structure keys. |
See also
cfgrid, cfgridrow, cfgridupdate, cfform, cfapplet, cfinput, cfselect, cfslider, cftextarea, cftree
History
ColdFusion 9.0.1: Added the attributes autoExpand and headerMenu supported only in HTML grids.
ColdFusion 9: Added boolean, date, numeric, and string_noCase to the type attribute values supported in HTML grids.
ColdFusion MX 7: Added the mask attribute, and the currency type attribute value.ColdFusion MX: Changed behavior if select="no": a user cannot select and edit the cell data, regardless of the cfgrid selectmode attribute value. When clicked, the cell border (and, depending on the selectColor value, the cell background) changes color, but the cell data cannot be edited.
Attributes
Note: In XML format, ColdFusion 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. |
Attribute |
Req/Opt; formats |
Default |
Description |
|
---|---|---|---|---|
autoExpand |
Optional;HTML |
yes for first column and no for remaining columns |
On a particular column, it lets you expand |
|
name |
Required;all |
|
Name of the grid column element. |
|
bgColor |
Optional;all |
|
Color of background of grid column.
|
|
bold |
Optional;all |
As specified by cfgrid |
|
|
dataAlign |
Optional;applet, Flash, HTML |
As specified by cfgrid |
Column data alignment:
|
|
display |
Optional;all |
yes |
|
|
font |
Optional;all |
As specified by cfgrid |
Font of data in column. |
|
fontSize |
Optional;all |
As specified by cfgrid |
Size of text in column. |
|
header |
Optional;all |
yes |
Text for the column header. |
|
headerAlign |
Optional;applet |
As specified by cfgrid |
Column header text alignment:
|
|
headerBold |
Optional;HTML, applet |
As specified by cfgrid |
|
|
headerFont |
Optional;HTML, applet |
As specified by cfgrid |
Font for the column header. |
|
headerFontSize |
Optional;HTML, applet |
As specified by cfgrid |
Size of text for the column header, in pixels. |
|
headerIcon |
Optional |
|
Location of an image file to use as the icon for |
|
{{headerMenu}}Added in ColdFusion 9.0.1 |
Optional;HTML |
no |
Lets you turn on/off the header menu of the grid column. |
|
headerItalic |
Optional;HTML, applet |
As specified by cfgrid |
|
|
headerTextColor |
Optional;HTML, applet |
|
Color of grid control column header text.
|
|
href |
Optional;HTML, applet |
|
URL or query column name that contains a URL to |
|
hrefKey |
Optional;HTML, applet |
|
The query column to use for the value appended to the href |
|
italic |
Optional;all |
As specified by cfgrid |
|
|
mask |
Optional;Flash, HTML |
|
A mask pattern that controls the character pattern that the form displays or allows users to input and sends to ColdFusion.
|
|
numberFormat |
Optional;Applet |
|
Format for displaying numeric data in the grid. See the following table of numberFormat attribute mask characters. |
|
select |
Optional;all |
yes |
Determines selection behavior if the cfgrid selectmode attribute value is column, edit, or single; ignored for row or browse values.
|
|
target |
Optional;HTML, Applet |
|
Frame or standard HTML target in which to open link specified in href. |
|
textColor |
Optional;Applet, Flash, HTML |
|
Color of grid element text in column as a hexadecimal number or text name.
|
|
type |
Optional;all |
|
You can specify the following values in all formats:
|
|
values |
Optional;HTML, applet |
|
Formats cells in column as drop-down list boxes; specify items in drop-down list, for example:
|
|
valuesDelimiter |
Optional;HTML, applet |
, (comma) |
Delimiter in values and valuesDisplay attributes. |
|
valuesDisplay |
Optional;HTML, applet |
|
Maps elements in the values attribute to string to display in the drop-down list. Delimited strings and/or numeric ranges. |
|
width |
Optional;all |
Column head width |
Column width, in pixels. |
The following matrix describes the behavior of type="boolean".
Before |
After |
---|---|
Y |
N |
T |
F |
1 |
0 |
true (for static grids) |
false (for static grids) |
true (for dynamic grids) |
NO (for dynamic grids) |
For non-boolean or null |
Y |
In applet format only, you can use the following numberFormat attribute mask characters to format output in U.S. numeric and currency styles. For more information on using these mask characters, see NumberFormat. (The cfgridcolumn tag does not support international number formatting.)
Character |
Meaning |
---|---|
_ |
(Underscore) Digit placeholder. |
9 |
Digit placeholder. |
. |
(Period) Location of mandatory decimal point. |
0 |
Located to left or right of mandatory decimal point; pads with zeros. |
( ) |
Puts parentheses around mask if number is less than 0. |
+ |
Puts plus sign before positive numbers, minus sign before negative numbers. |
- |
Puts space before positive numbers, minus sign before negative numbers. |
, |
(Comma) Separates every third decimal-place with a comma. |
L,C |
Left-justify or center-justify number within width of mask column. First character of mask must be L or C. Default: right-justified. |
$ |
Puts dollar sign before formatted number. Must be the first character of mask. |
^ |
(Caret) Separates left from right formatting. |
date/time formats in mask attribute
By default, Flash displays date/time values in grid columns with a format that shows values such as Oct 29 2004 11:03:21. Use the mask attribute to display the date or time in a different format, as described in the following table:
Pattern letter |
Description |
---|---|
Y |
Year. If the number of pattern letters is two, the year is truncated to two digits; otherwise, it appears as four digits. The year can be zero-padded, as the third example shows in the following set of examples: Examples:YY = 03YYYY = 2003YYYYY = 02003 |
M |
Month in year. The format depends on the following criteria:
|
D |
Day in month. Examples:D=4DD=04DD=10 |
E |
Day in week. The format depends on the following criteria:
|
A |
AM/PM indicator. |
J |
Hour in day (0-23). |
H |
Hour in day (1-24). |
K |
Hour in am/pm (0-11). |
L |
Hour in am/pm (1-12). |
N |
Minute in hour. Examples:N = 3NN = 03 |
S |
Second in minute. |
Other text |
You can add other text into the pattern string to further format the string. You can use punctuation, numbers, and all lowercase letters. Avoid upper case letters because they may be interpreted as pattern letters.Example:EEEE, MMM. D, YYYY at H:NN A = Tuesday, Sept. 8, 2003 at 1:26 PM |
Example
The following example lets you update certain fields of the CourseList table in the cfdocexamples database. It uses cfgridcolumn tags to structure the table.
<!--- If the gridEntered field exists, the form has been submitted. Update the database. ---> <cfif IsDefined("form.gridEntered")> <cfgridupdate grid = "FirstGrid" dataSource = "cfdocexamples" tableName = "CourseList" keyOnly = "Yes"> </cfif> <!--- Query the database to fill up the grid. ---> <cfquery name = "GetCourses" dataSource = "cfdocexamples"> 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>You can update the Name, Level, and Description information for courses.</i> <!--- The cfform tag must surround a cfgrid control. ---> <cfform action = "#CGI.SCRIPT_NAME#"> <cfgrid name = "FirstGrid" width = "500" query = "GetCourses" colheaderbold="Yes" font = "Tahoma" rowHeaders = "No" selectColor = "Red" selectMode = "Edit" > <!--- cfgridcolumn tags arrange the table and control the display. ---> <!--- Hide the primary key, required for update ---> <cfgridcolumn name = "Course_ID" display = "No"> <!--- select="No" does not seem to have any effect!!! ---> <cfgridcolumn name = "Dept_ID" header = "Department" Select="No" width="75" textcolor="blue" bold="Yes"> <cfgridcolumn name = "CorNumber" header = "Course ##" Select="No" width="65"> <cfgridcolumn name = "CorName" header = "Name" width="125"> <cfgridcolumn name = "CorLevel" header = "Level" width="85"> <cfgridcolumn name = "CorDesc" header = "Description" width="125"> </cfgrid> <br> <cfinput type="submit" name="gridEntered"> </cfform> </body> </html>