|
cfgrid
DescriptionUsed
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.
Syntax<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"
collapsible="false|true"
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"
groupfield="column name"
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"
onLoad="JavaScript function name"
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"
title="text"
tooltip="text"
visible="yes|no"
vSpace="integer"
width="integer">
zero or more cfgridcolumn and cfgridrow tags
</cfgrid>
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 alsocfajaximport, cfapplet, cfcalendar, cfgridcolumn, cfgridrow, cfgridupdate, cfform, cfformgroup, cfformitem, cfinput, cfselect, cfslider, cftextarea, cftree, Using
HTML grids in the Developing ColdFusion Applications
HistoryColdFusion
9:
Added collapsible, groupfield,
and title attributes, supported in HTML grids only.
Added ability to use the insert attribute in HTML grids.
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:
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.
AttributesNote: 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
|
name
|
Required; all
|
|
Name of the grid control.
|
align
|
Optional;
applet
|
|
Alignment of the grid cell contents:
Top
Left
Bottom
Baseline
Texttop
Absbottom
Middle
Absmiddle
Right
|
appendKey
|
Optional;
HTML, applet
|
yes
|
|
autoWidth
|
Optional;
HTML, applet
|
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 cfgridcolumnwidth attribute
values. Horizontal scroll bars are not available.
no: sets columns to equal widths or the
values specified in the cfgridcolumnwidth attributes.
|
bgColor
|
Optional; all
|
|
Background color of the control.
For
most formats, can be a hexa-decimal 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.
Limitations: for HTML format, must be a valid web color;
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.
|
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 Developing ColdFusion Applications.
|
bindOnLoad
|
Optional; HTML
|
yes
|
Ignored
if there is no bind attribute.
For more information,
see Using
the bindOnLoad attribute in the Developing ColdFusion Applications.
|
bold
|
Optional; all
|
no
|
|
colHeaderAlign
|
Optional;
applet
|
left
|
left: left-aligns
the column header text.
right: right-aligns the column header text.
center: centers the column header text.
|
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.
|
collapsible
|
Optional; HTML
|
False
|
A Boolean value specifying whether the user
can collapse the entire grid by clicking an arrow on the title bar.
Specifying this attribute adds a title bar to the grid.
|
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
|
applet: generates
a Java applet.
Flash: generates a Flash grid control.
html: generates an AJAX-based HTML grid
control that supports data binding.
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.
|
gridDataAlign
|
Optional;
applet
|
left
|
left: left-aligns
data within the column.
right: right-aligns data within the column.
center: centers data within the column.
|
gridLines
|
Optional; applet, Flash
|
yes
|
|
groupField
|
Optional; HTML
|
Don’t group
|
Puts the grid rows into groups, organized
by the column specified in this attribute. Each group is collapsible
and has a header with the column name, group field value, and number
of entries in the group.
If you set this option, the column
pull-down menu shows two grouping options: The show in Groups option
turns column grouping on and off. The Group By This Field option
sets the grouping to use the selected column. Users display the
pull-down menu by moving the mouse over a column head and clicking
the down arrow that appears
You can use this attribute with
static grids only, do not use it with dynamic grids that get their
data using bind expressions.
|
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, html
|
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.
If a URL is called, since
the data is passed in JSON format to the URL page, use the function DeserializeJSON.
The
arguments cfgridrow and cfgridchanged must
be serialized to JSON strings if a JavaScript bind is used to pass
these arguments to a URL.
|
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 grid gets
focus.
|
onLoad
|
Optional
|
|
A custom JavaScript function to execute
when the grid is loaded and rendered.
|
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
|
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.
|
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
|
left: left-aligns
the row header text.
right: right-aligns the row header text.
center: centers the row header text.
|
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 cfgridcolumntype="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:
Single: user selections
are limited to the selected cell.
Column: user selections automatically extend to the column
that contains selected cell.
Browse: the user can only browse grid data.
|
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.
|
title
|
Optional; HTML
|
|
Text to display as a title at the top of
the grid. Specifying this attribute adds a title bar to the grid.
|
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.
|
UsageMost 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 Developing ColdFusion Applications.
For information that is specific to HTML format grids, see Using
HTML grids in the Developing ColdFusion Applications.
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 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, recommends
that after user updates data in a cell, they click another cell
before submitting the form.
Returning cfgrid data to the action pageThe 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 grids in the Developing ColdFusion Applications.
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 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 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), 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 attributeWhen 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.
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.
ExampleThe
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>
|