The data grid is critical to all sorts of development on all sorts of platforms and in all sorts of languages. ColdFusion has supported data grids since ColdFusion 2 - first a Java applet, then a Flash control, and in ColdFusion 8 we've added an HTML data grid that can be pre-populated with data, or which can be used to display live data loaded asynchronously.
The basic pre-populated data grid functions much like the <CFGRID> of old, pass it a query and it displays the data. Here is an example (which uses the example tables that come with ColdFusion):
<cfquery name="artists" datasource="cfartgallery">
SELECT artistid, lastname, firstname, email
FROM artists
ORDER BY lastname, firstname
</cfquery>
<cfform>
<cfgrid name="artists"
format="html"
striperows="yes"
query="artists">
<cfgridcolumn name="lastname" header="Last Name" width="100"/>
<cfgridcolumn name="firstname" header="First Name" width="100"/>
<cfgridcolumn name="email" header="E-Mail" width="200"/>
</cfgrid>
</cfform>
Here a <CFQUERY> retrieves data, and <CFGRID> displays the results. The grid is straight client side HTML with CSS and JavaScript. You have control over look and feel including size, columns, colors, and fonts. And users can sort up and down, resize columns, and more.
The new <CFGRID> also supports Ajax type interaction, where data is not pre-populated, but is asynchronously loaded as needed. Here is a sample data grid:
<cfwindow initshow="true" center="true"
width="430" height="340" title="Artists">
<cfform>
<cfgrid name="artists"
format="html"
pagesize="10"
striperows="yes"
bind="cfc:artists.getArtists({cfgridpage},
{cfgridpagesize},
{cfgridsortcolumn},
{cfgridsortdirection})">
<cfgridcolumn name="lastname" header="Last Name" width="100"/>
<cfgridcolumn name="firstname" header="First Name" width="100"/>
<cfgridcolumn name="email" header="E-Mail" width="200"/>
</cfgrid>
</cfform>
</cfwindow>
This data grid is displayed in a window created using the new <CFWINDOW> tag (for no good reason other than I like the look of it). The data grid itself has no passed query, instead, it is bound to artists.cfc. When the data grid needs data it fires an asynchronous call to the getArtists() method in artists.cfc, and passes it four pieces of information: the current page, the page size (specified previously in the pagesize attribute), and the column being sorted on and sort direction (if the user opts to sort data). <CFGRID> thus requests data, and simply displays whatever ColdFusion returns, automatically supporting paging (assuming there are enough rows to so warrant).
Now for the CFC:
<cfcomponent output="false">
<cfset THIS.dsn="cfartgallery">
<!--- Get artists --->
<cffunction name="getArtists" access="remote" returntype="struct">
<cfargument name="page" type="numeric" required="yes">
<cfargument name="pageSize" type="numeric" required="yes">
<cfargument name="gridsortcolumn" type="string" required="no" default="">
<cfargument name="gridsortdir" type="string" required="no" default="">
<!--- Local variables --->
<cfset var artists="">
<!--- Get data --->
<cfquery name="artists" datasource="#THIS.dsn#">
SELECT artistid, lastname, firstname, email
FROM artists
<cfif ARGUMENTS.gridsortcolumn NEQ ""
and ARGUMENTS.gridsortdir NEQ "">
ORDER BY #ARGUMENTS.gridsortcolumn# #ARGUMENTS.gridsortdir#
</cfif>
</cfquery>
<!--- And return it as a grid structure --->
<cfreturn QueryConvertForGrid(artists,
ARGUMENTS.page,
ARGUMENTS.pageSize)>
</cffunction>
</cfcomponent>
The getArtists returns a structure (containing data in the format required by the data grid), and accepts four arguments, the same four arguments passed in the client side bind attribute. The first two are always passed by the client, and so they are required. The latter two are only passed if the user clicks on a column header to sort the data, and so those arguments are not required and default to "". <CFQUERY> performs the actual data retrieval, conditionally sorting the data if sorting is required. And finally, the new QueryConvertForGrid() function extracts the desire data subset (using the passed page and pagesize values) and formats it as a structure which is returned to the data grid.
This is a basic example, and we'll look at additional functionality in future posts.
<cfgridcolumn name="Checked" header="Delete" type="boolean" width="46" display="yes"/> to my cfgrid to add a
checkbox. My cfgrid's format is format="HTML". What
happens is that there will be a column that is
created, but is blank. I would have to click on the cell
to have the checkbox display. After I focus on a
different cell, it would display true or false,
depending on whether the checkbox is checked or not.
I was wondering how can I make the checkbox
display right when the grid is displayed? Currently I
have to click on the cell to make the checkbox appear.
Jason