Nathan asks:
This was an interesting problem. First, let's be sure we are clear on what Nathan is seeing. The sexy new CFGRID added in ColdFusion 8 allows you to either directly pass a query to the grid itself (with a query defined on the same page, or loaded via CFC, UDF, etc) or load it via Ajax. This is done with the bind attribute.I am recently getting into CF8 and Ajax features and for doing so building a small application to add items to a cart. I have it setup currently that items are in a select box and a cfgrid shows some item information of the item selected. Since, at a time only one item can be selected, I want to remove the pagination that comes by default with cfgrid. I am able to do that if I get a result query and use the cfgrid with a query attribute, but if I go for a dynamic bind, the pagination controls are present.
If you pass the query to the grid then the pagination controls are not displayed. For example:
Even if you set a pagesize attribute, it will be ignored and the entire query will be displayed in the grid. Now compare this a grid that loads it's data via the bind attribute:
So how do you get rid of the bar? I knew that ColdFusion provided a function, ColdFusion.Grid.getGridObject, that would give me direct access to the grid. I figured then it would be a simple matter of checking the Ext API docs to see if there was a method to hide the panel.
I dug... and I dug... but I was unable to find anything that made sense to me. Using Firebug and the console.dir command (think of it as a ColdFusion dump), I finally found this:
var myGrid = ColdFusion.Grid.getGridObject('entries');
myGrid.view.getFooterPanel().setVisible(false);
myGrid.view.refresh();
This seemed to work well. I then added an ajaxOnLoad() call to run the code on load. Here is the complete example:
<html>
<head>
<script>
function testit() {
var myGrid = ColdFusion.Grid.getGridObject('entries');
myGrid.view.getFooterPanel().setVisible(false);
myGrid.view.refresh();
}
</script>
</head>
<body>
<cfform name="test">
<cfgrid autowidth="true" name="entries" format="html" width="600" 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">
<cfgridcolumn name="posted" header="Posted">
</cfgrid>
</cfform>
<cfset ajaxOnLoad("testit")>
</body>
</html>
I'm not sure this is the best way to do it (I've actually got an Ext book on the way to me for review purposes), but it seems to work ok. Another solution would have been to use the drop down to drive a bound cfdiv tag. That cfdiv then could have loaded both an inline query and cfgrid.