Data Grids with CFGRID  
 
 

The CFGRID tag, another Java applet-based CFFORM control, allows you to build CFFORM grid controls. A grid control resembles a spreadsheet table and can contain data populated from a CFQUERY or from other sources of data. As with other CFFORM tags, CFGRID offers a wide range of data formatting options as well as the option of validating user selections with a JavaScript validation script.

Other CFGRID features include:

  • Alphanumeric sorting of data in a grid
  • Data updates, inserts and deletes
  • Images can be embedded in a grid

When users select grid data and submit the form, ColdFusion passes the selection information as form variables to the application page specified in the CFFORM ACTION attribute.

 
 
  Note  
 

If you specify a CFGRID tag with a QUERY attribute defined and no corresponding CFGRIDITEM attribute, the default grid that is created contains all the columns in the query.

CFGRID is used with the CFGRIDCOLUMN tag, much as CFTREE uses CFTREEITEM. In CFGRID, you define a wide range of row and column formatting options, as well as a query name, selection options, and so on. You use the CFGRIDCOLUMN tag to define individual columns in the grid.

Although the CFGRID tag includes a large number of attributes, the basics of building a CFGRID are very straightforward, as you'll see.

 
 
  Populating a grid from a query  
 
 

The following example shows a very basic CFGRID populated with data from a CFQUERY:

<CFQUERY NAME="getdata" DATASOURCE="cfsnippets">
    SELECT * FROM Employees
</CFQUERY>

<CFFORM NAME="Form1" ACTION="submit.cfm" METHOD="Post">

    <CFGRID NAME="employee_grid" QUERY="getdata" 
            SELECTMODE="single">
        <CFGRIDCOLUMN NAME="Employee_ID">
        <CFGRIDCOLUMN NAME="LastName">
        <CFGRIDCOLUMN NAME="Department">
    </CFGRID>

<BR><INPUT TYPE="Submit" VALUE="Submit">
</CFFORM>

The resulting CFGRID looks like this:

 
 
  Note  
 

If you specify a CFGRID tag with a QUERY attribute defined and no corresponding CFGRIDITEM attributes, the default grid that is created contains all the columns in the query.

 
 
  Hiding columns in a grid  
 
 

You can use the CFGRIDCOLUMN DISPLAY attribute to hide columns you want to retrieve from a data source but not expose to an end user, such as a customer ID or other primary key column. In the following example, the Employee ID column is retrieved, but not displayed:

<CFQUERY NAME="getdata" DATASOURCE="cfsnippets">
    SELECT * FROM Employees
</CFQUERY>

<CFFORM NAME="Form1"
    ACTION="submit.cfm"
    METHOD="Post"
    ENABLECAB="Yes">

    <CFGRID NAME="grid1" QUERY="getdata" 
            SELECTMODE="single">
        <CFGRIDCOLUMN DISPLAY="No" 
            NAME="Employee_ID">
        <CFGRIDCOLUMN NAME="LastName">
        <CFGRIDCOLUMN NAME="Department">
    </CFGRID>

<BR><INPUT TYPE="Submit" VALUE="Submit">

</CFFORM>


 
 
BackUp LevelNext
 
 

allaire     AllaireDoc@allaire.com
    Copyright © 1998, Allaire Corporation. All rights reserved.