Thursday, October 7, 2010

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>

...Read More

  © Blogger templates The Professional Template by Ourblogtemplates.com 2008

Header image adapted from atomicjeep