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>.
Adobe partner Universal Mind has announced the private beta of SpatialKey, a next generation information visualization, analysis and reporting system, designed to help organizations quickly assess location based information critical to their organizational goals, decision making processes and reporting requirements. An intro video has been posted, as has a complete feature list. The app is built using Flex and BlazeDS.
