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 lists the artists in the database, and the second lists the art created by that artist. First the CFC: SELECT artistid, lastname, firstname, email FROM artists ORDER BY #ARGUMENTS.gridsortcolumn# #ARGUMENTS.gridsortdir# SELECT artid, artname, description FROM art WHERE artistid = #ARGUMENTS.artistid# ORDER BY #ARGUMENTS.gridsortcolumn# #ARGUMENTS.gridsortdir# The client side code is pretty simple: Artists Art The code uses tags to place the two grids side-by-side. The first is bound to the getArtists() method, and selectonload="yes" is used to force an initial selection so that the second can be populated. The second is bound to the getArt() method. It specifies bindonload="no" to prevent getArt() from being invoked before a row in the artists 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 .
ColdFusion Ajax Tutorial 7: Related Data Grids
11 Comments
W
Hi Andrew,
You need to make sure there is a mapping to the cfide directory, where the scripts cf uses are kept. Not having this mapping is often the cause of the problem you are describing.
A
Andrew Pritchard
When I try to use the CF8 AJAX functions, I either get JavaScript errors or nothing happens. Could this be because the SA does not put web sites under the web root?
J
josh
Hi Ben, what kind of conditional logic could you use to hide the art grid if it was empty?
L
Lonnie
Hey Ben,
I agree with Josh's previous comment. How does one cause the second cfgrid to refresh when there is no related Artist record in the Artist cfgrid. Using this example, I'm particially successful in getting both cfgrids to display properly. But the moment I move within the "Master" data grid to a record with no matching ID value for the second datagrid's cfc query function, my second grid remains populated with the data from the previous ID matching and will not clearout.
Thanks in advance!
D
donaven
Does this code still work with CF 9?
L
Lonnie
Hello Donovan,
The scenario I noted previously involving the Master/Detail cfgrid situation was indeed in CF9. It works up to the point I mentioned in my previous post. It initially displays data in both grids for matching ID values, but does not work after moving off the record.
Thanks!
R
How would you set the column to be presorted?
I am using this for an employee directory that shows Last Name, First Name, Phone with Personnel set to display=no and I want to presort the grid based on a the Personnel column (Order by Personnel ASC)
How do I do that?
M
Mitchell Hu
Hi Ben:
According to your demo, I write a test code, then I found a problem.
For the master grid column which pass id to detail grid, if its value is pure digit and length large than 13 (for example, id='2010090300001', while it pass to detail grid, the value will be changed to '2.0100+E12'(like Ms Excel cell does), it makes CFC failure.
Is there any solution?
Tanks
P.S.: Sorry for my poor English ability.....
M
Mitchell Hu
Hi, Ben:
First, Thanks for the books your write. I learn a lot of from it. even it is English book. Ha! Ha! I live in Taiwan.
Second, I reference your demo and write a test code, then I found a problem.
For the master grid column for pass id to detail grid, it value is a length large than 13 and are pure digits , for example Id='2010090300001', while it passed to detail grid, the value will change to '2.01009E+12'( like excel cell does) , it makes cfc failure.
Is there any solution for it?
K
Kenneth Stevens
I know this is an old post but the cfc code is corrupted.
M
Matt
I had to add this to make mine work in ColdFusion 11 std.
<cfgridcolumn name="artistid" header="Last Name" display="no" />