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

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> </code>

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 developer advocate. He focuses on JavaScript, serverless 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

Comments