A user asked me to provide an example of related ColdFusion powered Ajax data grids, where a selection made in one grid would update the contents in a second grid. So, here is a simple example which uses the sample databases that are included with ColdFusion 8. One <cfgrid> lists the artists in the database, and the second <cfgrid> lists the art created by that artist.
First 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>
<!--- Get art --->
<cffunction name="getArt" 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="">
<cfargument name="artistid" type="numeric" required="yes">
<!--- Local variables --->
<cfset var art="">
<!--- Get data --->
<cfquery name="art" datasource="#THIS.dsn#">
SELECT artid, artname, description
FROM art
WHERE artistid = #ARGUMENTS.artistid#
<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(art,
ARGUMENTS.page,
ARGUMENTS.pageSize)>
</cffunction>
</cfcomponent>
The client side code is pretty simple:
<cfform>
<cflayout type="hbox">
<cflayoutarea>
<h1>Artists</h1>
<cfgrid name="artists"
format="html"
pagesize="10"
striperows="yes"
selectonload="yes"
bind="cfc:2grids.getArtists({cfgridpage},
{cfgridpagesize},
{cfgridsortcolumn},
{cfgridsortdirection})">
<cfgridcolumn name="lastname" header="Last Name" />
<cfgridcolumn name="firstname" header="First Name" />
</cfgrid>
</cflayoutarea>
<cflayoutarea>
<h1>Art</h1>
<cfgrid name="art"
format="html"
pagesize="10"
striperows="yes"
bindonload="no"
bind="cfc:2grids.getArt({cfgridpage},
{cfgridpagesize},
{cfgridsortcolumn},
{cfgridsortdirection},
{artists.artistid})">
<cfgridcolumn name="artname" header="Name" />
<cfgridcolumn name="description" header="Description" />
</cfgrid>
</cflayoutarea>
</cflayout>
</cfform>
The code uses <cflayout> tags to place the two grids side-by-side. The first <cfgrid> is bound to the getArtists() method, and selectonload="yes" is used to force an initial selection so that the second <cfgrid> can be populated. The second <cfgrid> is bound to the getArt() method. It specifies bindonload="no" to prevent getArt() from being invoked before a row in the artists <cfgrid> has been selected. When getArt() is invoked, the standard four cfgrid attributes are passed to it, along with {artists.artistid}, the artistid of the currently selected row in the artists <cfgrid>.
There are no comments for this entry.
[Add Comment]