Monday, September 08, 2008    
Home My Books Blog ColdFusion About Me Back    

Calendar
<< Mar 2007 >>
S M T W T F S
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
             

Search

Categories
 • Acrobat (2) [RSS]
 • Adobe (67) [RSS]
 • AdobeMAX06 (45) [RSS]
 • AdobeMAX07 (59) [RSS]
 • AdobeMAX08 (22) [RSS]
 • AIR (126) [RSS]
 • Appearances (118) [RSS]
 • Books (68) [RSS]
 • CFEclipse (14) [RSS]
 • ColdFusion (1143) [RSS]
 • Data Services (12) [RSS]
 • Fish Tank (2) [RSS]
 • Flash (103) [RSS]
 • Flex (365) [RSS]
 • Home Automation (3) [RSS]
 • Jobs (93) [RSS]
 • JRun (12) [RSS]
 • Labs (27) [RSS]
 • LiveCycle (21) [RSS]
 • MAX (157) [RSS]
 • Regular Expressions (12) [RSS]
 • RIA (4) [RSS]
 • SQL (37) [RSS]
 • Stuff (503) [RSS]
 • Tips (CF Studio) (80) [RSS]
 • Tips (CF) (795) [RSS]
 • Tips (Dreamweaver) (91) [RSS]
 • Tips (Flex Builder) (2) [RSS]
 • Using CF (136) [RSS]
 • Wireless (97) [RSS]

Other BLOGs
 • Charlie Arehart
 • Lee Brimelow
 • Ray Camden
 • Christophe Coenraets
 • Sean Corfield
 • Mihai Corlan
 • Cornel Creanga
 • John Dowdell
 • Danny Dura
 • Enrique Duvos
 • Steven Erat
 • Kevin Hoyt
 • Serge Jespers
 • Adam Lehman
 • Duane Nickull
 • Miti Pricope
 • Andrew Shorten
 • Ryan Stewart
 • James Ward
 • Greg Wilson
 • Full As A Goog

RSS Feeds
 • Feed
 • Subscribe

Join my mailing list and find out about new books and other topics of interest.

Thoughts, ideas, tips, musings, and pontifications (not necessarily in that order) by Ben Forta ...
NOTE: This is my personal blog, and the opinions and statements voiced here are my own.

Viewing By Entry / Main
March 28, 2007

Scorpio's Ajax Data Grid

<cfgrid> has been around for a long time. It started life as a Java applet, then in CFMX7 we added a Flash grid and XML generation, and in Scorpio we plan on adding an Ajax powered DHTML grid.

You'll be able to pass a query to the grid as you did previously, like this:

<cfquery datasource="myDSN" name="myQuery">
SELECT * FROM myTable
</cfquery>

...

<cfgrid name="staticgrid" query="myQuery" format="html" />

But where things get really interesting are when data is retrieved asynchronously (in much the same way as in the auto-suggest example I mentioned earlier this week). Look at this example:

<cfgrid name="asynchgrid"
   format="html"
   pageSize="10"      
   bind="cfc:data.getData({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})" />

The bind attribute specifies the CFC and method to be invoked, and the current page, page size, and sort information get passed to the CFC method which then returns the appropriate query data. And yes, this does mean that paging is supported, the grid contains paging controls and when you move through pages (or resort columns) the CFC method is asynchronously invoked and the grid is updated accordingly.

And of course there is more, for example:

<cfgrid name="asynchgrid"
   format="html"
   pageSize="10"
   bind="cfc:data.getData({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})"
   stripeRows="true"
   stripeRowColor="##e0e0e0">

      <cfgridcolumn name="firstName" header="First Name">   
      <cfgridcolumn name="lastName" header="Last Name">   
      <cfgridcolumn name="phone" header="Phone">   
</cfgrid>

Of course, this is all subject to change. :-)

Related Blog Entries

TrackBacks
There are no trackbacks for this entry.

No trackback URL. Trackbacks are only allowed via interactive form.

Comments
Looks really appealing! I would be learning/using this tag today if I had the chance.

I *hope* that there will be support for a stripeRowClass attribute to support CSS classes rather than hard coding the color into the CF code with stripeRowColor.
# Posted By Dan | 3/28/07 12:39 PM
my only gripe with grids in coldfusion (compared with microsoft Access) is that you can't include a combo-box in your grid... is this limitation going to be addresses in Scorpio?
# Posted By Michael White | 3/28/07 3:19 PM
Sorry but in all my 7 years of using CF I don't think I've ever found a use for cfgrid.

Maybe I've missed a trick with this.
*shrug*
# Posted By Adam Reynolds | 3/29/07 7:10 AM
excellent!

what a great way to have a reason to start using this TAG.

@adam, i think you might have not seen the light before because
it was always a weird, cumbersome THING.

now, it will be dhtml (ie. table, like normal html stuff :))
and like what you are used to seeing.

*i think*

anyway, it sounds DELICIOUS
good stuff.
# Posted By tony of the weeg clan | 3/29/07 9:38 PM
Looks good! I just finished my first Flex app this weekend, and it's nice to see that Flex, CF and Spry all seem to be converging to become the uber-platform for web (and of course desktop when you throw Apollo into the mix) development.
# Posted By Ken Dunnington | 4/1/07 11:24 PM
Looks awesome. I'm excited for it. Agreed, now cfgrid will finally have a (real) use!
# Posted By Rachel | 4/2/07 8:16 PM
It doesn't work .... see error.

Attribute validation error for tag CFGRID.
The tag does not allow the attribute(s) PAGESIZE,BIND. The valid attribute(s) are ALIGN,APPENDKEY,AUTOWIDTH,BGCOLOR,BOLD,COLHEADERALIGN,COLHEADERBOLD,COLHEADERFONT,COLHEADERFONTSIZE,COLHEADERITALIC,COLHEADERS,COLHEADERTEXTCOLOR,DELETE,DELETEBUTTON,ENABLED,FONT,FONTSIZE,FORMAT,GRIDDATAALIGN,GRIDLINES,HEIGHT,HIGHLIGHTHREF,HREF,HREFKEY,HSPACE,INSERT,INSERTBUTTON,ITALIC,LABEL,MAXROWS,NAME,NOTSUPPORTED,ONBLUR,ONCHANGE,ONERROR,ONFOCUS,ONVALIDATE,PICTUREBAR,QUERY,ROWHEADERALIGN,ROWHEADERBOLD,ROWHEADERFONT,ROWHEADERFONTSIZE,ROWHEADERITALIC,ROWHEADERS,ROWHEADERTEXTCOLOR,ROWHEADERWIDTH,ROWHEIGHT,SELECTCOLOR,SELECTMODE,SORT,SORTASCENDINGBUTTON,SORTDESCENDINGBUTTON,STYLE,TARGET,TEXTCOLOR,TOOLTIP,VISIBLE,VSPACE,WIDTH.

The error occurred in D:\apham\Business\ContinentsNews\WebRoot\myNews.cfm: line 141

139 :                </cfformgroup>
140 :                <cfformgroup type="page" label="Last Week">
141 :                   <cfgrid name="lastWeekNews" query="getTodayNews"
142 :                      format="html"
143 :                       pageSize="10"
# Posted By Alan | 6/5/07 10:55 AM
Alan, this example required ColdFusion 8 <CFGRID>, it won't work with earlier versions.

--- Ben
# Posted By Ben Forta | 6/5/07 11:16 AM
I am running into an error that has me scratching my head. I have followed a number of examples and keep running into the same issue where debug states "error:http: Error invoking CFC /park.cfc : Not Found"

The files are in the same directory and I have tried putting the CFC in a different location and it comes back with a completed different error " Could not find the ColdFusion Component or Interface". Anyhow, what follows is the code being used.

I have also connected to it via CFINVOKE without any problem.

--------------------------------------
----park.cfm ---
<cfform name="parkForm" action="park.cfm" method="post">
<cfgrid format="html" name="parkGrid" pagesize="5" selectmode="browse"
bind="cfc:park.getParks(page={cfgridpage},pageSize={cfgridpagesize},gridsortcolumn= {cfgridsortcolumn},gridsortdirection={cfgridsortdirection})" delete="yes" deletebutton="Remove" insert="yes" insertbutton="Insert" >
      
<cfgridcolumn name="site_name" width="300" header="site_name" />
<cfgridcolumn name="site_desc" width="180" header="site_desc" />
<cfgridcolumn name="site_url" width="120" header="site_url" />
<cfgridcolumn name="active" width="60" header="active" />
      
</cfgrid>
<cfinput name="submitBut" type="submit" value="Submit">
</cfform>

----------------------------------------
park.cfc (same directory)

<cfcomponent bindingname="park">
<cffunction name="getParks" access="remote" returntype="struct">
<cfargument name="page" required="true" />
<cfargument name="pageSize" required="true" />
<cfargument name="gridsortcolumn" required="true" />
<cfargument name="gridsortdirection" required="true" />
      
<cfif arguments.gridsortcolumn eq "">
<cfset arguments.gridsortcolumn = "site_name" />
<cfset arguments.gridsortdirection = "asc" />
</cfif>
   
<cfquery name="parks" datasource="lythoweb">
select      site_name , site_desc, site_url, active
from      portfolio
order by   #arguments.gridsortcolumn# #arguments.gridsortdirection#
</cfquery>
      
<cfreturn queryconvertforgrid(parks, page, pagesize) />
</cffunction>
</cfcomponent>

-----------------------------------------------------------
Error CfDebug
error:http: Error invoking CFC /park.cfc : Not Found

info:widget: Created grid, id: parkGrid

info:http: HTTP GET /park.cfc?method=getParks&returnFormat=json&argumentCollection=%7B%22PAGE%22%3A1%2C%22PAGESIZE%22%3A5%2C%22GRIDSORTCOLUMN%22%3A%22%22%2C%22GRIDSORTDIRECTION%22%3A%22%22%7D&_cf_nodebug=true&_cf_nocache=true&_cf_clientid=D1E68692B55A6D1428BFA54553F597AE&_cf_rc=0

info:http: Invoking CFC: /park.cfc , function: getParks , arguments: {"PAGE":1,"PAGESIZE":5,"GRIDSORTCOLUMN":"","GRIDSORTDIRECTION":""}

info:LogReader: LogReader initialized

info:global: Logger initialized
------------------------------------

This is pretty basic and is based on an example I found.. Has anyone else run it into this issue?

Thanks,
~Chris
# Posted By Chris Cantley | 9/30/07 9:37 PM
I'm having some trouble getting the pagesize attribute to work with cfgrid. I'm not using a binding, just a simple query, but it's not paging the results.

Here is the code:

<cfgrid name="comments"
      width="200%"
height="360"
format="html"
query="comments"
insert="yes"
pagesize="10"
delete="no"
autowidth="yes"
selectmode="edit">


Any clues?? Do you need to use a binding to use pagesize? (I'm reading through your book btw)
# Posted By Will Wilson | 10/30/07 10:26 AM
I know this is a little old, but I am having the same issue. I can't get pagesize to work with a query result set.
# Posted By Derek | 3/26/08 6:45 PM

  © Copyright 1997-2008 Ben Forta, All Rights Reserved