Ask a Jedi: Add a "Show All" button to CFGRID

This post is more than 2 years old.

Brett asks:

I was wondering if you have come across anything that would allow me to have a "Show All" feature on a cfgrid. Basically I want to set the page size equal to the recordcount. I have seen some options on the web, but nothing that works for a CF8 html grid that binds to a cfc. Any info you can give me would be great.

Before I answer this - a quick warning. Don't forget that ColdFusion 9 has an entirely updated version of the embedded Ext controls. The code I show here works fine in ColdFusion 9, but has not been tested in ColdFusion 8. Ok, with that out of the way, here is the solution I found.

First, a quick Google search turned up this gem: Grid Page Size Refresh. In this forum posting, the user uses the Datasource object from the Grid to update the size and refresh the data. Using his code as a sample, I whipped up the following simple example:

<html>

<head> <script> function showall() { console.log('hello') var theGrid = ColdFusion.Grid.getGridObject('entries') var ds = theGrid.getDataSource() ds.reload({params:{start:0,limit:ds.totalLength}}) theGrid.getView().refresh() } </script> </head>

<body>

<cfform name="test"> <cfgrid autowidth="true" name="entries" format="html" bind="url:getentries.cfm?page={cfgridpage}&pagesize={cfgridpagesize}&sort={cfgridsortcolumn}&dir={cfgridsortdirection}"> <cfgridcolumn name="id" display="false"> <cfgridcolumn name="body" display="false">

<cfgridcolumn name="title" header="Title" width="600"> <cfgridcolumn name="posted" header="Posted" width="100"> </cfgrid> <cfinput type="button" name="showallbtn" value="Show All" onclick="showall()"> </cfform>

</body> </html>

The bottom portion of the code block is a simple cfgrid bound to a CFM that returns blog entries. I've added a button below it that runs the function showall.

That function uses the ColdFusion Ajax API to get the native grid object and at that point, it's nothing more than figuring out the total size of the real data (i.e., ds.totalLenth) and passing that in as new parameters to the dataSource. Finally you do a quick resize and your golden. Here is a screen shot of the grid before the button is clicked:

And here is a (slightly shrunk) version of it after clicking:

Obviously you don't want to do this on a very large set of data.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by CF Mitrah posted on 10/29/2009 at 11:00 PM

Hi Jedi,
Do we have any chance to add search functionality in CF Grid.
-Muthu

Comment 2 by Raymond Camden posted on 10/29/2009 at 11:04 PM

I've shown examples of that before. Basically, you first add a new form field, for your search, then your grid bind just adds it:

<cfgrid autowidth="true" name="entries" format="html" bind="url:getentries.cfm?page={cfgridpage}&pagesize={cfgridpagesize}&sort={cfgridsortcolumn}&dir={cfgridsortdirection}&search={search}">

Your CFC has to handle the new argument.

Comment 3 by Brett posted on 10/30/2009 at 12:41 AM

Ray,

This worked perfectly. I appreciate the help and the quick response. As always my customer chnaged their mind AGAIN. Any idea of how this could be done with out a button. When the grid loads the page sixe meets the recordcount. I have been playing with this code and it seems to fail since the grid loads after the page and the grid has not be initialize as yet, so any onload events are failing. Any ideas.

Comment 4 by Raymond Camden posted on 10/30/2009 at 12:42 AM

Use the ajaxOnLoad CF function to run showall.

Comment 5 by Brett posted on 10/30/2009 at 12:57 AM

Sorry for the spelling errors in the previous post. I had tried the ajaxonload, but it still appears that it is occuring before the bind takes place to grab the data. It still keeps kicking back an error that null can not be converted to a number, so I would assume that the datasource had not been estabilshed when it was run.

Comment 6 by Raymond Camden posted on 10/30/2009 at 1:04 AM

Use this entry: http://www.coldfusionjedi.c...

It shows how to add an event listener for when the data is done.

Comment 7 by Brett posted on 10/30/2009 at 5:40 AM

Thanks Ray,

You would have to refence the last question I asked you... I was able to get it to work, however it locks up the browser as it seems to be reloading the data over and over. This is not the case with the show all button you created in this example. Any ideas why calling the function via a listener would cause the browser to lock up? Thanks again for the info, it is really appreciated.

Comment 8 by Raymond Camden posted on 10/30/2009 at 5:45 AM

No idea - if this is online where I can see it, I'll give it a shot.

Comment 9 by Ron Charles posted on 11/1/2009 at 6:17 PM

Hey Ray. Thanks so much for doing all of this! You sure are a great help! Just one thing though...Do you think you could do some blog post on coldfusion and the facebook api? Gavin Vincent has done a lot but i think you can do way more! Things like using the new newsfeed and there seems to be a few bugs in the cfcs.. I wish it was as stable at blogcfc or Galeon.Thanks a bunch and happy Halloween too

Comment 10 by Raymond Camden posted on 11/1/2009 at 7:02 PM

I actually do have an article on Facebook (posted both here and the Adobe Developer Center), but it's a bit old. No real plans yet to add a Facebook project to my list of stuff on my plate. :)

Comment 11 by Tim posted on 11/4/2009 at 8:16 PM

Ray - will you post your getentries.cfm from the example?

Also, I'm having a lot of trouble formating an html CF9 cfgrid... IE 6, 7, 8, Safari, FF all render differently... and cannot get the sort to turn off. Seems like I spend more time fixing display issues than developing functionality.

Thanks

Comment 12 by Raymond Camden posted on 11/5/2009 at 1:12 AM

getentries returns a query passed through queryConvertForGrid. So it's nothing much there. If you want the code, email me off blog and I'll send you a copy.

UI: Heh, well, that's always tricky, isn't it? Remember that if you can't get the grid perfect, you don't _have_ to use it. I recommend the jqGrid plugin for jQuery.