Programming ColdFusion

Grids

The CFGRID tag provides a Java-based grid control for displaying and editing tabular data. CFGRID allows you to display data sets in a familiar spreadsheet format that makes scrolling through and updating multiple records easy. A sample CFGRID control for displaying data can be seen in Figure 10-4.

Example 10-9 queries a database and subsequently populates a CFGRID control with the record set data.

Figure 10-4. The CFGRID control

Example 10-9. Creating a Basic Grid Control

<CFQUERY NAME="GetPeople" DATASOURCE="ProgrammingCF">
         SELECT * FROM EmployeeDirectory
</CFQUERY>

<CFFORM ACTION="Example10-9.cfm" ENABLECAB="Yes" NAME="MyForm" 
        ENCTYPE="application/x-www-form-urlencoded">

<CFGRID NAME="MyGrid" WIDTH="600" HEIGHT="250" QUERY="GetPeople" 
        SORT="yes" SELECTMODE="browse" PICTUREBAR="no" 
        SORTASCENDINGBUTTON="Sort Ascending"
        SORTDESCENDINGBUTTON="Sort Descending" 
        NOTSUPPORTED="<B>Your web browser must support Java to view 
                      ColdFusion Java Applets</B>">
</CFGRID>

</CFFORM>

The NAME attribute specifies the name of the grid control. HEIGHT and WIDTH specify the height and width (in pixels) for the grid’s display area. HSPACE and VSPACE specify the amount of padding (in pixels above, below, to the left, and to the right of the grid control; we’re allowing the grid to use its default values of 0 pixels for both. The ALIGN attribute determines the grid’s alignment on the page. ...