cfgrid

<cfgrid 
   name = "name"
   format = "applet" or "Flash" or "xml"
   height = "integer"
   width = "integer"
   query = "query_name"
   selectMode = "mode"
   insert = "yes" or "no"
   delete = "yes" or "no"
   font = "column_font"
   fontSize = "size"
   italic = "yes" or "no"
   bold = "yes" or "no"
   textColor = "web color"
   gridLines = "yes" or "no"
   rowHeight = "pixels"
   colHeaders = "yes" or "no"
   colHeaderFont = "font_name"
   colHeaderFontSize = "size"
   colHeaderItalic = "yes" or "no"
   colHeaderBold = "yes" or "no"
   colHeaderTextColor = "web color"
   bgColor = "web color"
   maxRows = "number"
   The following works in Flash format only
   style= "style specification"
   enabled = "Yes" or "No"
   visible = "Yes" or "No"
   toolTip = "Tip text"
onChange = "ActionScript"
   The following work in applet and XML format only
autoWidth = "yes" or "no"
   vSpace = "integer"
   hSpace = "integer"
   align = "value"
   sort = "yes" or "no"
   href = "URL"
   hrefKey = "column_name"
   target = "URL_target"
   appendKey = "yes" or "no"
   highlightHref = "yes" or "no"
   onValidate = "javascript_function"
   onError = "text"
   gridDataAlign = "position"
   rowHeaders = "yes" or "no"
   rowHeaderAlign = "position"
   rowHeaderFont = "font_name"
   rowHeaderFontSize = "size"
   rowHeaderItalic = "yes" or "no"
   rowHeaderBold = "yes" or "no"
   rowHeaderTextColor = "web color"
   colHeaderAlign = "position"
   selectColor = "web color"
   notSupported = "text"
   pictureBar = "yes" or "no"
   insertButton = "text"
   deleteButton = "text"
   sortAscendingButton = "text"
   sortDescendingButton = "text"
onBlur = "actionscript to invoke"
onFocus = "actionscript to invoke">
zero or more cfgridcolumn and cfgridrow tags
</cfgrid>

form.#GridName#.#ColumnName#
form.#GridName#.original.#ColumnName#
form.#GridName#.RowStatus.Action

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

http://myserver.com?cfgridkey=selection

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

Comments

aestelker said on Feb 14, 2005 at 10:43 AM :

Is there a way to include horizontal scrolling within the grid?

jrunrandy said on Feb 15, 2005 at 5:46 AM :

aestelker: You need to place the grid inside a <cfformgroup type="vbox or hbox"> with the widths set accordingly. The VBOX will provide the horizontal scroll.

aestelker said on Feb 15, 2005 at 7:18 AM :

jrunrandy: Placing the cfgrid inside of a formgroup does create a horizontal scroll bar, but it has the side effect of placing the vertical scrollbar off screen. This negates the benefits of even using a horizontal scrollbar with this method.

unleashed said on Feb 19, 2005 at 6:01 PM :

Same request... I've been waiting for a year for the flash datagrid and now I can't use it (easily) on any grids that are too wide (which is most of them).

I just don’t see why MM didn’t build a horizontal scrollbar into the flash datagrid.

No screen name said on Feb 19, 2005 at 10:56 PM :

How would you make an item in the cfgrid column be a hyperlink, like link to a master/detail page link or make it be an email link. This is probably easy but im a newbie to CF and iv tried a million things and cant get it

No screen name said on Feb 20, 2005 at 2:11 PM :

whoops i ment to type this code
<cfform method="get" preloader="yes" format="flash" skin="haloblue" height="400">

<cfgrid name="grid" format="flash" query="tenants" autowidth="true" rowheaders="no" height="400" selectmode="single" onChange="getURL('Details.cfm?tenant_id='+grid.selectedItem.tenant_id);">
<cfgridcolumn name="apt_number" header="Apt." width="50">
<cfgridcolumn name="first_name" header="First Name">
<cfgridcolumn name="last_name" header="Last Name">
<cfgridcolumn name="address" header="Address">
<cfgridcolumn name="phone" header="Phone">
<cfgridcolumn name="email" header="Email">
<cfgridcolumn name="tenant_id" display="no">
</cfgrid>

</cfform>

argolnx said on Feb 22, 2005 at 8:16 AM :

Hi. If you put in the example provided in the installation of the server "FLASH" format instead of "APPLET" the form post only empty array. How you can use FLASH cfgrid for updating data?

mattlangston said on Mar 1, 2005 at 11:04 PM :

Is there anyway to highlight a particular row programmatically? Suppose I want to remember the users currently selected row of a <cfgrid> after a form posts back to the server. How do I select that row so that it is highlighted?

jrunrandy said on Mar 8, 2005 at 6:12 AM :

As far as I know, there is no way to highlight a row after a form post back (i.e. maintain and highlight the row selected by the user after the post back)

No screen name said on Mar 10, 2005 at 9:50 AM :

When using a query to populate a grid, is it possible to add additional columns that do not exist in the query (programmatically calculated fields)?

jrunrandy said on Mar 14, 2005 at 2:10 PM :

I can think of two techniques (neither of which I've tried):
* Define the calculated field in the SELECT statement using SQL
* Use the QueryAddColumn function (http://livedocs.macromedia.com/coldfusion/7/htmldocs/00000598.htm)

broon said on Mar 20, 2005 at 7:58 AM :

What is the best way to add record set paging and filtering to a flash grid? I'd like to be able to display a max number of records and then provide the user buttons to page thru the test of the record set.

ZeroOne said on Mar 21, 2005 at 4:26 PM :

If you just put the datagrid inside a cfform (which you have to anyway) and give the cfform a width you will automatically get a horizontal slider if the datagrid is too wide. e.g. if the cfform is 640 wide and the cfgrid is 690 wide.

neilb98 said on Mar 30, 2005 at 6:28 PM :

I managed to get horizontal scrollbars on a CFGRID, but I had to finagle it myself, and its still not a perfect solution. I set the form height to 200px, width680px

I had a TON of data to be displayed in the grid, so I set the width of the grid to 1400, and the height of the grid to this formula: height="#50+(queryname.recordcount * 21)#"

No, this isn't a perfect solution. But it works for me so far.

The email address and website in this login is outdated. Send any comments to neil.bailey@i-dezynes.com/website:www.i-dezynes.com

drew_falkman said on Apr 3, 2005 at 4:36 PM :

When using INSERT in a Flash form, if the user enters multiple new rows, it only allows carries over form information for the last row entered.

No screen name said on Apr 8, 2005 at 4:02 PM :

After setting the GridName and ColNameList variables as follows:
<cfset ColNameList = "parent_su,sd,su,su_owner,eployeeid,fn,ln">
<cfset GridName = "owners_grid">

The Grid Modification Diplay Routine Above Gives the Following Error:

A CFML variable name cannot end with a "." character.
The variable form. ends with a "." character. You must supply an additional structure key or delete the "." character.

The CFML compiler was processing:

* a cfset tag beginning on line 12, column 8.
* a cfset tag beginning on line 12, column 8.
* a cfset tag beginning on line 12, column 8.
* a cfset tag beginning on line 12, column 8.


The error occurred in C:\Program Files\Apache2\htdocs\Workload\owners.cfm: line 12

10 : <cfoutput><br>form.#GridName#.#ColName#:<br></cfoutput>
11 :
12 : <cfset Array_New = form.[#GridName#][#ColName#]>
13 : <cfset Array_Orig = form[#GridName#]['original'][#ColName#]>
14 : <cfset Array_Action = form[#GridName#]RowStatus.Action>

inix said on Apr 17, 2005 at 10:12 AM :

Just realized that you can manipulated the "eanbled" state of another form element on the page on the CFGRID's onChange event.

<CFGRID
onChange="mySubmitButton.enabled=true"...>

<INPUT
TYPE="submit"
name="mySubmitButton"
enabled="FALSE">
...kind of cool

No screen name said on Apr 19, 2005 at 1:25 AM :

I got the same

A CFML variable name cannot end with a "." character.
The variable form. ends with a "." character. You must supply an additional structure key or delete the "." character.

Can anyone help? CFGRIDUPDATE is not working for me so I need to code this manually and unless I can enumerate the fields I am sunk.

billy nasty said on May 18, 2005 at 12:00 AM :

yeah this is the code to insert or delete items from the grid manually

<cfif IsDefined('form.gridname.rowstatus.action')>
<cfloop index="i" from="1" to="#ArrayLen(form.gridname.rowstatus.action)#">
<!--- insert statement--->
<cfif form.gridname.rowstatus.action[i] IS "I">
<cfquery name="Insert" datasource="#Application.dbTravel#">
INSERT INTO _cards (FirmaCC, NummerCC, VervaldatumCC, CUV, ReizigerID)
VALUES ('#form.gridname.FirmaCC[i]#', '#form.gridname.Nummer[i]#', '#form.gridname.VervaldatumCC[i]#', '#form.gridname.CUV[i]#', '169')
</cfquery>

<!--- delete statement--->
<cfelseif form.gridname.rowstatus.action[i] IS "D">
<cfquery name="Delete" datasource="#Application.dbTravel#">
DELETE FROM _cards
WHERE rid=#form.gridname.Original.rid[i]#
</cfquery>
</cfif>
</cfloop>
</cfif>

jrunrandy said on May 25, 2005 at 3:13 PM :

shimmer, I have added enhancement request 60224 in response to your request.

FYI, the Bug Reporting link also allows you to request enhancements.

No screen name said on Jun 1, 2005 at 6:12 PM :

if anyone is still experiencing problems with CFGRID and wants an alternative (which is better and not better depending on your requirements) I have managed to reproduce the functionality using three templates which can be cfinclude'd.

this solution involves straight html, a tiny bit of javascript and stock standard coldfusion code (i.e. no java-based code).

It works a treat (for me) on MX6 and the calling templates are simpler than with cfgrid. Some functionality is missing but then you can code in what you like really if you change the include files.

email me on cfgrid@haroldsteptoe.mailhaven.com if you want copies and a sample.

ccapodilupo said on Jun 7, 2005 at 9:08 AM :

In reponse to -argolnx said on Feb 22, 2005 at 8:16 AM -

Macromedia needs to post a hotfix for <cfgrid format="FLASH"

There is no way for the form to update data on the action page, I hate to gripe but this proably wasn't tested.

brookswift said on Jun 13, 2005 at 1:55 PM :

I'm also having trouble figuring out how to set up a master/detail list in the flash grid. If someone knows how to do that, I'd be very appreciative.

No screen name said on Jun 24, 2005 at 11:16 AM :

For update to work on a flash cfgrid the entire form has to be a flash form.

ASandstrom said on Jul 5, 2005 at 12:53 PM :

Here is a simple code example to go to a different page based on what the user clicks in the grid:

<cfset getclasslist=QueryNew("className, instructor, link")>
<cfset newrow = queryaddrow(getclasslist, 4)>

<cfset temp=querysetcell(getclasslist, "className", "Math", 1)>
<cfset temp=querysetcell(getclasslist, "instructor", "Einstein", 1)>
<cfset temp=querysetcell(getclasslist, "link", "http://localhost:8500/livedocs/mathinfo.cfm", 1)>

<cfset temp=querysetcell(getclasslist, "className", "French", 2)>
<cfset temp=querysetcell(getclasslist, "instructor", "Voltaire", 2)>
<cfset temp=querysetcell(getclasslist, "link", "http://localhost:8500/livedocs/frenchinfo.cfm", 2)>

<cfset temp=querysetcell(getclasslist, "className", "Art", 3)>
<cfset temp=querysetcell(getclasslist, "instructor", "Leonardo", 3)>
<cfset temp=querysetcell(getclasslist, "link", "http://localhost:8500/livedocs/artinfo.cfm", 3)>

<cfset temp=querysetcell(getclasslist, "className", "Gym", 4)>
<cfset temp=querysetcell(getclasslist, "instructor", "Armstrong", 4)>
<cfset temp=querysetcell(getclasslist, "link", "http://localhost:8500/livedocs/gyminfo.cfm", 4)>

<cfform format="Flash" width="500" height="400">
<cfgrid name="classlist"
query="getclasslist"
onchange="getURL(classlist.dataProvider[classlist.selectedIndex]['link']);"
>
<cfgridColumn name="className" header="Subject">
<cfgridColumn name="instructor" header="Instructor">
<cfgridColumn name="link" header="link URL">
</cfgrid>
</cfform>

TheNewb said on Jul 8, 2005 at 12:25 PM :

There seems to be an error in the CFGRID documentation.

The QUERY attribute is marked as being optional, and I know it definitely was in MX 6.1, however it is now required in MX7. A simple grid using this code:

<cfgrid name="myGrid"></cfgrid>

Will throw the following error:

"The system has attempted to use an undefined value, which usually indicates a programming error, either in your code or some system code.

Null Pointers are another name for undefined values."

Applying the QUERY attribute works however. Hope this helps!

yukonzach1 said on Jul 17, 2005 at 8:57 PM :

Thank you "No screen name"!! Changing my cfform to format FLASH allowed the update to work!

guessed said on Jul 18, 2005 at 8:12 AM :

The above documentation states that 'insertButton' and 'deleteButton' are only available to the applet format, however when I specify them in a flash grid they (fortunately!) appear.

I have no time to test this, but this 'bug' could also be affecting other parameters.

No screen name said on Jul 20, 2005 at 9:13 AM :

OK I'd appreciate any help because I'm just not getting it. I'm using a cfgrid with two columns and a cfinput text field to pass values to an update page. The user selects a row (they can only select one row) from the grid then enters values in the text field. I don't understand how the cfgrid passes the values to the action page. The documentation description looks different from what I see in the debug on the action page.


here's what i get on the debug of the action page:
(I've added returns and comments)

//this is the value of the textbox;
ORG=1111

__CFGRID__BUDGETOBJECTS__FAO=__CFGRID__COLUMN__=CFGRIDROWINDEX;
__CFGRID__DATA__=11;
__CFGRID__COLUMN__=FUND;
__CFGRID__DATA__=3860;
__CFGRID__COLUMN__=AGENCY;
__CFGRID__DATA__=227;

how do I use this in my insert??

jrunrandy said on Jul 20, 2005 at 2:00 PM :

Good catch. This is a problem in the docs. I ran into it a couple of months ago, but forgot to post a correction to LiveDocs.

Here is why the example doesn't work: form.[#GridName#][#ColName#] isn't really a structure. It's just a variable that happens to have periods in it. So to fix it, replace the following lines:
<cfset Array_New = form[#GridName#][#ColName#]>
<cfset Array_Orig = form[#GridName#]['original'][#ColName#]>
<cfset Array_Action = form[#GridName#]RowStatus.Action>

With the following lines:
<cfset Array_Action = form[GridName &'.RowStatus.Action']>
<cfset Array_New = form[GridName &'.' &ColName]>
<cfset Array_Orig = form[GridName & '.original.' & ColName]>


That should do it. Of course, you also have to set the GridName variable to the name of the grid and the ColNameList variable to a list of the grid columns, as described in the cfgrid page.

coacf said on Jul 20, 2005 at 3:24 PM :

not sure if that really answered my question.

so you're telling me that to simply pass the column/values of a single row i have to convert the data to an array? or is it automatically converted to an array?

i'm not updating the data i'm just using the value to pass into a query

No screen name said on Jul 21, 2005 at 7:04 AM :

the cfgrid applet format does not support onChange event. I tried to submit the form on a change event and it just did not work. I think applets in form are a pain in the neural mass.

jrunrandy said on Jul 21, 2005 at 11:07 AM :

coacf,
Yes. I'm saying that CF converts the data to an array.

If you have additional questions, I suggest that you post them to the online Forum, which has heavier traffic than LiveDocs: http://webforums.macromedia.com/coldfusion

Snake_Hollywood said on Sep 30, 2005 at 5:16 AM :

There appears to be a bug if you try and use multiple instances of CFGRID on the same page (flash).
The columns are repeated for each instance.
I.E. If I have a cfgrid with 2 columns, and I have 6 instances of this on a page, instance 1 has 2 columns, instance 2 has 4 columns, instance 3 has 6 columns etc. And the data is always that form the first instance.

Example code:-
<cfoutput query="components" group="componentID">
<fieldset><legend>#component#</legend>
<cfgrid name="C#componentID#" height="150" width="100%" format="FLASH" insert="No" delete="No" sort="Yes" font="Arial" bold="No" italic="No" autowidth="true" appendkey="No" highlighthref="No" enabled="Yes" visible="Yes" griddataalign="LEFT" gridlines="Yes" rowheaders="No" rowheaderalign="LEFT" rowheaderitalic="No" rowheaderbold="No" colheaders="No" colheaderalign="LEFT" colheaderitalic="No" colheaderbold="No" selectmode="EDIT" picturebar="No">
<cfgridcolumn name="fieldID" headeralign="LEFT" dataalign="LEFT" bold="No" italic="No" select="No" display="No" type="NUMERIC" headerbold="No" headeritalic="No">
<cfgridcolumn name="fieldName" header="Field Name" headeralign="LEFT" dataalign="LEFT" bold="No" italic="No" select="No" display="Yes" type="STRING_NOCASE" headerbold="No" headeritalic="No">
<cfgridcolumn name="data" headeralign="LEFT" dataalign="LEFT" bold="No" italic="No" select="Yes" display="Yes" type="NUMERIC" headerbold="No" headeritalic="No">

<cfoutput>

<cfgridrow data="#fieldID#,#fieldName#,#data#">

</cfoutput>
</cfgrid>

</fieldset>
</cfoutput>

maclonghorn said on Jan 14, 2006 at 6:16 AM :

Apparently, and contrary to the docs, "rowheaders" property is applicable to a Flash form as well as an applet.

EricGyenes said on Jun 14, 2006 at 1:32 PM :

I found a solution to the Horizontal scroll bar issue using actionscript and a trigger AFTER the grid loads.

<cfgrid format="flash" name="myGrid"> ... </cfgrid>

<cfinput type="text"
name="myGridTrigger"
value=""
bind="{ (1==2) ? null : function() {
_root.myGrid.hScrollPolicy = 'on'; }.call() }"
visible="no"
height="0"
width="0" />

No screen name said on Nov 18, 2006 at 2:43 AM :

Should'nt the Description for the onBlur and onFocus attributes be
ActionScript that runs when the grid loses focus.
instead of
ActionScript that runs when the calendar loses focus.

Jools2 said on Jun 7, 2007 at 8:35 AM :

When using a grid in edit mode, populating it with a query of queries breaks the ability of the posted grid to make use of the rowstatus action as per:

<cfloop index="i" from="1" to="#ArrayLen(form.StudentList.rowstatus.action)#">
<cfif form.StudentList.rowstatus.action[i] EQ "D">
<cfset UnivNoList = ListDeleteAt(UnivNoList, ListFind(UnivNoList, form.StudentList.original.Univno[i]))>
</cfif>
</cfloop>


The array returns a 0 length

julian.simpson@bris.ac.uk

No screen name said on Sep 28, 2007 at 11:23 AM :

If you are getting expired certificate warnings, install TechNote b9c2d61c. Certificate then updated to 2010 May 20.