ColdFusion Day 61:

ColdFusion Day 61:

================

GRID FORMATTING

Now that you have finished with the heart of grids - creating them, populating them with useful information, and then allowing the user to work with the information - you will turn to the cosmetic: attributes that enable you to control the appearance of grids.

These attributes don't require detailed descriptions to master because most of them are quite clear and they are the same as tags used to format other form controls. let's start by looking at attributes that can be used in the CFGRID tag:

HEIGHT Specifies the height of the entire control in pixels.

WIDTH Specifies the width of the entire control in pixels.

VSPACE Specifies vertical space around the control in pixels.

HSPACE Specifies horizontal space around the control in pixels.

FONT Specifies the font to use for all data in the grid control.

ITALIC Indicates whether text in the grid should be italic (possible values are Yes and No.)

BOLD Indicates whether text in the grid should be bold (possible values are Yes and No.)

ROWHEIGHT Specifies minimum row height in pixels.

ROWHEADERALIGN Indicates text alignment for row headers (possible values are left, right or center).

ROWHEADERFONT Specifies the font to use for row headers.

ROWHEADERFONTSIZE Specifies the font size in points for row headers.

ROWHEADERITALIC Indicates whether row headers should be italic (possible values are Yes and No.)

ROWHEADERBOLD Indicates whether row headers should be bold (possible values are Yes and No.)

ROWHEADERWIDTH Specifies the width in pixels of row headers.

COLHEADERS Indicates whether column headers should be displayed (possible values are Yes and No.)

COLHEADERALIGN Indicates text alignment for column headers (possible values are left, right or center).

COLHEADERFONT Specifies the font to use for column headers.

COLHEADERFONTSIZE Specifies the font size in points for column headers.

COLHEADERITALIC Indicates whether column headers should be italic (possible values are Yes and No.)

COLHEADERBOLD Indicates whether column headers should be bold (possible values are Yes and No.)

BGCOLOR Specifies a background color for the control as a hexadecimal RGB triplet in the form ##XXXXXX or XXXXXX or as a color name from the following list: Black, magenta, Cyan, Orange, DarkGray, Pink, Gray, White, LightGray, or Yellow.

SELECTCOLOR Specifies the background color for a selected item as a hexadecimal RGB triplet or a color name.

PICTUREBAR Indicates whether image buttons should be used for insert, delete, and sort buttons (possible values are Yes and No.)

These appearance attributes are further enhanced by attributes for the CFGRIDCOLUMN tag related to appearance and formatting:

WIDTH Specifies the width of the column in pixels.

FONT Specifies the font to use for all data in the grid control.

FONTSIZE Specifies the font size in points for text in the control.

ITALIC Indicates whether text in the grid should be italic (possible values are Yes and No.)

BOLD Indicates whether text in the grid should be bold (possible values are Yes and No.)

HEADERALIGN Indicates text alignment for the column header (possible values are left, right, or center).

HEADERFONT Specifies the font to use for the column header.

HEADERFONTSIZE Specifies the font size in points for the column header.

HEADERITALIC Indicates whether the column header should be italic (possible values are Yes and No.)

HEADERBOLD Indicates whether the column header should be bold (possible values are Yes and No.)

Some other features of grid controls warrant brief discussion:

* Associating URLs with grid items

* Including images in grid cells

* Manually populating grids

ASSOCIATING URLs WITH GRID ITEMS

When building grid controls, you can associate a url with the cells in a column by using the HREF attribute. You can do this in two ways: by specifying a URL or by specifying another column from the query result that contains URLs.

In either case, the entries in the particular column will be presented as clickable URLs, and a URL attribute called CFGRIDKEY will be added to the end of the URL containing information that is dependent on the selection mode being used in the grid. Table 14.2 shows possible selection modes and their effect on the CFGRIDKEY URL attribute.

TABLE 14.2 Selection modes and the CFGRIDKEY URL attribute

SELECTMODE value CFGRIDKEY value

Single Value of the selected cell.

Row Comma-separated list of values from the cells in the selected row in left-to-right order as displayed in the grid.

Column Comma-separated list of values from the cells in the selected column in top-to-bottom order as displayed in the grid.

When a user clicks a URL, the relevant value is then passed to the template that can access it in the same way that any other URL attribute is accessed.

Entries in a grid are converted into URLs by using the HREF attribute of the CFGRIDCOLUMN tag. This attribute can specify an absolute URL, a relative URL, or the name of a query column containing URLs.

For instance, if in our employees examples you have a template called employeedetails.cfm that displays an employees details, then you can use HREF="employeedetails.cfm" in the appropriate column's.

CFGRIDCOLUMN tag to create the URLs. For instance, consider the following form template:

SELECT *

FROM Employees

ORDER BY ID

</CFQUERY>

</CFGRID>

</CFFORM>

In this template, the grid column for the employee ID uses the HREF tag to make it into a URL. The result looks like those in Figure 14.29.

FIGURE 14.29: URLs in a grid

--------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------

| 1 | 1 | Danesh | Arman | M | $10000.00|

| 2 | 2 | Smith | John | M | $7500.00|

| 3 | 3 | Doe | Jane | F | $6200.00|

| 4 | 4 | Johnson | Mary | F | $9900.00|

| 5 | 5 | Danesh | Joe | M | $10000.00|

| 6 | 6 | Danesh | Kevin | M | $10000.00|

|=============================================================

| ----------------- ------------------ ----------------- -------------------- |

| ---------------- ------------------ ---------------- --------------------- |

| ------------------------- |

| | Submit Query | |

| -------------------------- |

--------------------------------------------------------------------------------------------------------------------------

If you look carefully, you can see that each of the entries in the ID column is an underlined link as opposed to plain text. (Well, if you use a little imagination, you will see it). Each is a link to the employeedetails.cfm template.

<H1>Employee #

<CFOUTPUT>#ListGetAt(URL.CFGRIDKEY,1)#</CFOURPUT></H1>

Last Name:

<CFOUTPUT#ListGetAt(URL.CFGRIDKEY,2)#</CFOUTPUT>

First Name:

<CFOUTPUT#ListGetAt(URL.CFGRIDKEY,3)#</CFOUTPUT>

Gender:

<CFOUTPUT#ListGetAt(URL.CFGRIDKEY,4)#</CFOUTPUT>

Salary:

<CFOUTPUT#ListGetAt(URL.CFGRIDKEY,5)#</CFOUTPUT>

Notice the use of ListGetAt here to obtain individual values from URL.CFGRIDKEY. Because this URL attribute contains a comma-separated list of values in the selected row, you can treat it as a regular list variable and pull individual values out of it using ListGetAt. Details of working with lists are covered in Chapter 13.

When you click one of the links in the grid, the employeesdetails.cfm template opens and displays the selected data, as shown in Figure 14.30

FIGURE 14.30: Displaying a selected record after form submission

Employee #14

Last Name: Smith

First Name: Wes

Gender: M

Salary: $7500

Another use of the HREF attribute is to link a record in a grid to a URL stored with it in the database. For instance, if your employee database table had another column called homepage containing the URL of the employee's home page, you could link their records to their homepage with the following CFGRIDCOLUMN tag:

Because homepage is a field in your query result now, the value of this field will be treated as the URL for the link. The CFGRIDKEY attribute will still be appended to the URL.

Back Next