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

Forms Tags

cfajaximport cfapplet cfcalendar cfform cfformgroup cfformitem cfgridcolumn cfgridrow cfgridupdate cfinput cfselect cfslider cftextarea cftree

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

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

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

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