Ben Forta

AdobeStock_455007340

ColdFusion Ajax Tutorial 7: Related Data Grids

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 .

11 responses to “ColdFusion Ajax Tutorial 7: Related Data Grids”

  1. Andrew Pritchard Avatar
    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?

    Reply
  2. Will Swain Avatar
    Will Swain

    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.

    Reply
  3. josh Avatar
    josh

    Hi Ben, what kind of conditional logic could you use to hide the art grid if it was empty?

    Reply
  4. Lonnie Avatar
    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!

    Reply
  5. donaven Avatar
    donaven

    Does this code still work with CF 9?

    Reply
  6. Lonnie Avatar
    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!

    Reply
  7. Ron Avatar
    Ron

    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?

    Reply
  8. Mitchell Hu Avatar
    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?

    Reply
  9. Mitchell Hu Avatar
    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…..

    Reply
  10. Kenneth Stevens Avatar
    Kenneth Stevens

    I know this is an old post but the cfc code is corrupted.

    Reply
  11. Matt Avatar
    Matt

    I had to add this to make mine work in ColdFusion 11 std.
    <cfgridcolumn name="artistid" header="Last Name" display="no" />

    Reply

Leave a Reply