Friday 03 Sep 2010   
Add Comment

Paging With CFGRID Tutorial

ColdFusion Tutorial #1

This tutorial shows how simple it is to do paging of a recordset using CFGRID.

demo.cfm

This is very simple, firstly you just setup a grid by defining a grid and the columns. This is done using the <cfgrid and <cfgridcolumn tags very straight forward.

On line 2, the cfgrid line, add a binding, and yes all those bind attributes are required, it's so that the cfc can return the right set of records for the page you are on.

cfgridpage = what page the grid is on
cfgridpagesize = how many records are displayed per page
cfgridsortcolumn = the selected column to sort
cfgridsortdirection = the sort direction

These get sent to the cfc so that it can pull apart the query and return the right information.



park.cfc

The cfc is just as simple, receive all those required paramaters (lines 2-5). Lines (7-10) defines a default sort order because the first time you run a grid, you haven't clicked the column header.

Now you can do a query as normal, make sure you return all the columns you need for the grid or you will get an error. And you can use the sort arguments to define the sort order.

Line 18 takes the query and only returns the part of the query you need to display the page. That's it, very easy for this level of functionality. This returns a structure and not a query, note the function return type. So it will only send your browser the records it needs to display the current page.



Demo

See this code running!


Download

Download this code as a zip!


Comments

Trying to get this working locally and having real issues.
We keep coming up against this js error
'Exception thrown and not caught'
The grid just has the headers and page numbers - but no data even though I can see the data been returned by using cfdebug on the url
Paul Hopkinson @ Wednesday 17 Oct 2007 - 10:36:33 PM

What version of ColdFusion is this because in 7 you can't use bind and pagesize in version 7.02
Syd @ Tuesday 18 Dec 2007 - 05:09:32 AM

It's Version 8
Dale Fraser @ Tuesday 18 Dec 2007 - 12:10:12 PM

Yeah getting the same problem and I'm running CF V8
Craig @ Monday 18 Feb 2008 - 10:55:56 PM

Make sure you have a CFIDE virtual directory under your site, this is needed for the Ajax includes.
Dale Fraser @ Wednesday 20 Feb 2008 - 01:08:38 PM

How to add CFIDE virtual directory.
Ram @ Wednesday 12 Mar 2008 - 11:20:31 AM

It depens on your config.
In IIS you just create a virtual directory called CFIDE pointing to the C:\ColdFusion8\wwwroot\CFIDE directory.
Dale Fraser @ Wednesday 12 Mar 2008 - 01:04:03 PM

I have Built in ColdFusion Server on my desktop so where do I include my dir mapping, I have it mapped in CF Admin.
And do we need cfajaxproxy for this.

Ram @ Thursday 13 Mar 2008 - 06:43:29 AM

This will be included in the CF8 install, if you can browse to the administrator then it's working and your problem must be elsewhere.
Dale Fraser @ Thursday 13 Mar 2008 - 08:45:18 AM

When execute this code in my local machine it give an error.
Error invoking CFC /park.cfc : Not Found
manoj kothari @ Thursday 01 May 2008 - 08:23:26 PM

i am a begnieer programmer in coldfusion, and i have iis, can you explain me how i create virtual directory, and how i call coldfusion component in coldfusion,
Niraj Kumar @ Tuesday 10 Jun 2008 - 05:03:18 AM

i have the same problem error invoking CFC internal server error. checked IIS and the virtual CFIDE is set up properly as well. driving me nuts coz i can't bind cfgrids. plz help ....
goldcoastnerd @ Wednesday 02 Jul 2008 - 02:15:40 PM

Thank you for sharing this. It was nice and clear but when I implement it, I get the cfgrid, and the pagination bar, but no data--the "loading" icon at bottom just keeps going forever. I've seen others comment on this while searching today but no answers for them.
The query normally (prior to dropping it in the CFC anyway, I was using a query in the grid originally) works fine so it's something about the bind.
Any ideas??
PJ @ Saturday 02 Aug 2008 - 07:29:59 AM

10 minutes start to finish with changes made for my Db. Thank you for the post!!
John W @ Monday 11 Aug 2008 - 11:34:56 PM

the sorting is fetching results out of the record set ...
loshy @ Wednesday 13 Aug 2008 - 11:20:32 AM

I am just downloading your code samples and i try to run. That time I am getting following problem like "error invoking CFC /park.cfc:Not found [Enable debugging by adding 'cfdebug' to your URL parameters to see more information].". The grid just has the headers and page numbers - but no data even though I can see the data been returned
Environmental details:
OS Installed: Windows XP,
ColdFusion V8,
IE 7.0

Santhanam @ Thursday 21 Aug 2008 - 11:11:32 PM

Hi Dale,
Can I get the complete code with the javascript files you call for the demo? I really need to create something similar and don't know how to add the navigation buttons and highlighting of records...thanks so much!
James
James @ Friday 29 Aug 2008 - 06:44:27 AM

I've been trying to figure this out:
What if there are 100,000 parks?
How does cfgrid manage that? Is it going to select all rows? That just isn't good.
Is this CFGrid thing only good for little lookups, or is there a way to apply it to real tables with lot of rows?
DonCx @ Sunday 26 Oct 2008 - 11:10:55 AM

May I see how you're calling this with the CFINVOKE? I keep getting this error:
The following parameters must be specified for the cfgrid BIND expression: cfgridpage,cfgridpagesize
Earl @ Thursday 11 Dec 2008 - 09:08:36 AM

How could I make this go to a certain page once it is clicked, or how could I load an image or something similar to that? doesn't have to be on the same page either.
Jody @ Wednesday 31 Dec 2008 - 06:07:56 PM

I've followed all the examples and I did it using my own db to present my records using CFGRID. It is cool BUT The only problem I found with the result is that the grid eliminate all the leading zeros from one of my column.
What supposed to be shown as 00,01,02,03,04, etc. are shown as 0,1,2,3,4,etc.
This is unacceptable and I don't know if there is a work around for this issue.
Tha datatype is varchar. When I query this column in my database those leading zeroes are there. Also when I cfoutput them I can see all the leading zeroes. Only when it show up within cfgrid those leading zeroes was stripped
Is this a bug? has anyone experienced this situation? has someone found a work around? Please help!
Alec @ Friday 23 Jan 2009 - 06:48:40 AM

cut and pasted the example. not getting data. getting the grid controls only.
paul @ Sunday 01 Feb 2009 - 11:35:10 PM

Thanks
Your demo.cfm & park.cfc is solving my problem. my problem is solve.
Thanks alot.............
kamalkant @ Tuesday 17 Mar 2009 - 06:05:56 PM

Same problem. I get grid but no data. CFDEBUG shows data being pulled. and repulled when I click headers, But no error.
I get the following error in the java erro console:
Error: [Exception... "'SyntaxError: parseJSON' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001c (NS_ERROR_XPC_JS_THREW_JS_OBJECT)" location: "<unknown>" data: no]
working with coldfusion8.
No errors in CF log files.
What could be the problem?
Here is cfdebu results:
info:http: CFC invocation response: {"TOTALROWCOUNT":42,"QUERY":{"COLUMNS":["CALL_ID","RESULT"],"DATA":[[81,"JOINED"],[83,"ADMIN UPDATE ONLY"],[84,"ADMIN UPDATE ONLY"],[90,"SENT TO ADMIN"],[92,"JOINED"],[94,"JOINED"],[95,"JOINED"],[96,"JOINED"],[49,"UPDATED LEFT IN QUEUE"],[50,"JOINED"]]}}
info:widget: Creating window: cf_window1239047598444
info:widget: Created grid, id: artists
info:http: HTTP GET /getcallsbyrep.cfc?method=callsByRep&returnFormat=json&argumentCollection=%7B%22page%22%3A1%2C%22pageSize%22%3A10%2C%22gridsortcolumn%22%3A%22%22%2C%22gridsortdir%22%3A%22%22%7D&_cf_nodebug=true&_cf_nocache=true&_cf_rc=0
info:http: Invoking CFC: /getcallsbyrep.cfc , function: callsByRep , arguments: {"page":1,"pageSize":10,"gridsortcolumn":"","gridsortdir":""}
info:LogReader: LogReader initialized
info:global: Logger initialized
Sue Lornitzo @ Tuesday 07 Apr 2009 - 06:09:05 AM

Re: cfgrid showing up with no data; CFC error reported by CFDebugger
I had a similar problem and couldn't find a solution. On a whim I tried to move the location of the CFC. I had it in a separate directory under htdocs. When I moved the CFC into the same directory as the page with the cfgrid, voila! the grid had data
Hope this helps!
CfSolar @ Sunday 19 Apr 2009 - 07:03:30 AM

Thanks! Sorry, been out of town..
CFC is in same dircetory. Interestingly enough.. we have several Linux machines and several windows machines and the code works on some Linux machines and some windows machines, but not others. We checked CF settings and paths and they are all identical in every way, noticed different versions of Apache, but installing new versions of Apache didn't work either. I am stumped
Sue Lornitzo @ Thursday 30 Apr 2009 - 02:54:25 AM

This appears to be missing the cfinvoke portion of the code, which is the final requirement. Am I missing something?
Norman Carnovale @ Thursday 17 Dec 2009 - 05:55:56 AM

How to set grid to specified page?
SysCf @ Thursday 07 Jan 2010 - 07:29:55 PM

this is for Sue Lornitzo.
Did you ever find the solution to your problem? I have the same problem. Code works on other servers but not on the one where I really need it to work.
Thanks, Jim
Jim @ Thursday 04 Feb 2010 - 01:58:19 AM

Well, no I did just find in log file File not found: /CFIDE/scripts cfformhistory.cfm
and file path should be/ /CFIDE/scripts/ cfformhistory.cfm
not sure where I would change this or if is the problem

susan lornitzo @ Tuesday 30 Mar 2010 - 12:41:19 PM

DID ANY ONE GET IT TO WORK WITH OUT THE BELOW ---- Error invoking CFC /park.cfc : Internal Server Error [Enable debugging by adding 'cfdebug' to your URL parameters to see more information]---
Please let me know if u have any....
SAI @ Friday 30 Apr 2010 - 02:30:22 AM

iam trying to use cfgrid with bind and all i get back is grid with no data in it. i have tried the basic simple example and it doesn't work.i dont get any errors. however it works great with the query but not when i use the bind attribute. please help. i need to be able to complete my task quickly and this has been dragging me down.
sainisha @ Thursday 24 Jun 2010 - 06:13:37 AM

Click button to add a comment


Author

Dale Fraser


Published

Tuesday 28 Aug 2007

Tags

cfargument  cfform  cffunction  cfgrid  cfgridcolumn  cfif  cfquery  cfreturn  cfset