ColdFusion 9.0.1: Expand / Collapse All Groups in a CFGrid
Being late to the game, I just read about CF9's grouping feature with CFGrids. While it is a useful feature, I immediately noticed there was no option to expand or collapse all groups. After perusing the Ext forums, I discovered methods for expanding or collapsing all groups in the underlying GridView class. With the help of ajaxOnLoad(), I was able to create a grouped CFGrid, but this time with all groups collapsed by default.
<script type="text/javascript">
function collapseGrid() {
var grid = ColdFusion.Grid.getGridObject('MyGrid');
grid.getView().collapseAllGroups();
}
</script>
... create the grouped cfgrid ...
<cfset ajaxOnLoad("collapseGrid")>
Giddy with my small success, I decided to try creating a button that would Expand/Collapse all groups. Fortunately a great entry on Dan Vega's blog saved me from hurting myself with my rudimentary Ext skills. In no time at all, I had a new toolbar with a button.
Now since I wanted to pass the grid id into the handler function, I used createCallback() to bind the grid id as a function argument. Voila! A fully functional (albeit plain) toolbar button that toggles the expansion state of all groups.
If you are interested in styling the button, check out ColdFusion 8 Grid Custom Toolbars for an example.
Full Code (Requires CF 9.0.1)
<!--- sample data for grid --->
<cfset qGridData = queryNew("ID,Title,Area", "integer,varchar,varchar") />
<cfloop from="1" to="50" index="r">
<cfset row = queryAddRow(qGridData, 1)>
<cfset qGridData.ID[row] = r>
<cfset qGridData.Title[row] = "Title "& numberFormat(r, "000")>
<cfset qGridData.Area[row] = ceiling(r /10)>
</cfloop>
<html>
<head>
<script type="text/javascript">
function init(){
// create a toolbar
var tbar = ColdFusion.Grid.getTopToolbar('MyGrid');
tbar.addButton({xtype: 'tbfill'});
// add a button that expands/collapses all groups
tbar.addButton({ text: "Expand/Collapse All",
tooltip: "Toggles the expansion state of all groups",
handler: toggleGridGroups.createCallback('MyGrid')
});
//show the toolbar
ColdFusion.Grid.showTopToolbar('MyGrid');
//collapse all groups by default
var grid = ColdFusion.Grid.getGridObject('MyGrid');
grid.getView().collapseAllGroups();
}
function toggleGridGroups(gridId){
var grid = ColdFusion.Grid.getGridObject(gridId);
grid.getView().toggleAllGroups();
}
</script>
</head>
<body>
<cfform format="html">
<cfgrid name="MyGrid" format="html" query="qGridData" groupField="Area" width="500">
<cfgridcolumn name="Title" header="Title" />
<cfgridcolumn name="Area" header="Title Area" />
</cfgrid>
</cfform>
<cfset ajaxOnLoad("init")>
</body>
</html>
Posts
