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.
Archived Comments
Hi Jedi,
Do we have any chance to add search functionality in CF Grid.
-Muthu
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.
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.
Use the ajaxOnLoad CF function to run showall.
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.
Use this entry: http://www.coldfusionjedi.c...
It shows how to add an event listener for when the data is done.
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.
No idea - if this is online where I can see it, I'll give it a shot.
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
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. :)
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
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.