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
|
cfgridcolumn, cfgridrow, cfgridupdate, cfapplet, cfform, cfinput, cfselect, cfslider, cftextinput, cftree, cftreeitem
|
|
History
|
ColdFusion MX: Changed the rowHeaderWidth attribute: ColdFusion does not use the rowHeaderWidth attribute. You can omit it.
|
|
|
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 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):
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:
<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:
- If selectMode = "Single", selection is the value of the column clicked.
- If selectMode = "Row", selection is a 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 delimited list of row values in the clicked column, beginning with the value of the first cell in the column.
|
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>
...
|