Dynamically hiding a HTML CFGridColumn

I've been working with CFGrids recently especially the HTML format. One recent issue I had was the ability to dynamically hide a column once the grid has been loaded.

Luckily the Ext's framework that sits underneath is full of hidden gems in ways you can add extra functionality and ColdFusion provides ColdFusion.Grid.getGridObject that allows you to tap into this

First, lets create our grid

<cfset gridData = queryNew("col1,col2")>
<cfloop from="1" to="5" index="i">
<cfset queryAddRow(gridData)>
<cfset querySetCell(gridData, "col1", "Row #i# Col 1", i)>
<cfset querySetCell(gridData, "col2", "Row #i# Col 2", i)>
</cfloop>

<cfscript>
   args = structNew();   
   args.autowidth = true;
   args.name = "myTestGrid";
   args.format = "html";
   args.width = "250";
   args.query = "gridData";
</cfscript>


<cfform name="test">
<cfgrid attributeCollection="#args#">
   <cfgridcolumn name="col1" header="My 1st Col">
   <cfgridcolumn name="col2" header="My 2nd Col">
</cfgrid>
</cfform>

The idea of the code will be to dynamically hide the first column onLoad.

<!--- When using ajaxOnLoad you need the <script> needs to be in the HTML head --->
<cfsavecontent variable="ScriptForHead">
<script language="JavaScript" type="text/javascript">
   hideCol = function(){
      // Get the grid object        gridObj = ColdFusion.Grid.getGridObject('myTestGrid');
       // Get the column model       cm = gridObj.getColumnModel();
       // On a column we can run a host of methods. Check out        // http://www.culture.gov.sk/extras/yui-ext/docs/YAHOO.ext.grid.DefaultColumnModel.html        // I'm using http://www.culture.gov.sk/extras/yui-ext/docs/YAHOO.ext.grid.DefaultColumnModel.html#setHidden        cm.setHidden(0,true); // setHidden(colIndex, hidden)        
       // reload the grid       gridObj.reconfigure(gridObj.getDataSource(),cm);
    }   
</script>   
</cfsavecontent>

<cfhtmlhead text="#ScriptForHead#" />
<!--- use AjaxOnLoad to Hide the column onLoad--->
<cfset ajaxOnLoad('hideCol')>

Complete code should look like this:

<!--- When using ajaxOnLoad you need the <script> needs to be in the HTML head --->
<cfsavecontent variable="ScriptForHead">
<script language="JavaScript" type="text/javascript">
   hideCol = function(){
      // Get the grid object        gridObj = ColdFusion.Grid.getGridObject('myTestGrid');
       // Get the column model       cm = gridObj.getColumnModel();
       // On a column we can run a host of methods. Check out        cm.setHidden(0,true);
       // reload the grid       gridObj.reconfigure(gridObj.getDataSource(),cm);
    }   
</script>
</cfsavecontent>

<cfhtmlhead text="#ScriptForHead#" />
<!--- use AjaxOnLoad to Hide the column onLoad--->
<cfset ajaxOnLoad('hideCol')>   


<cfset gridData = queryNew("col1,col2")>
<cfloop from="1" to="5" index="i">
<cfset queryAddRow(gridData)>
<cfset querySetCell(gridData, "col1", "Row #i# Col 1", i)>
<cfset querySetCell(gridData, "col2", "Row #i# Col 2", i)>
</cfloop>

<cfscript>
   args = structNew();   
   args.autowidth = true;
   args.name = "myTestGrid";
   args.format = "html";
   args.width = "250";
   args.query = "gridData";
</cfscript>


<cfform name="test">
<cfgrid attributeCollection="#args#">
   <cfgridcolumn name="col1" header="My 1st Col">
   <cfgridcolumn name="col2" header="My 2nd Col">
</cfgrid>
</cfform>

Comments (1) Print Send del.icio.us Digg It! Linking Blogs

1380 Views | Posted At : March 3, 2008 3:54 AM | Posted By : Andy Jarrett
Related Categories: ColdFusion

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)

[Add Comment]

Breizh's Gravatar Why would you put that "Save the bear" extremelly anoying image
at the top left of your page?
The whole content is panning right and left every 3 seconds.
Are you trying to send visitors away from your otherwise well design
and pleasant site?
# Posted By Breizh | 5/12/08 2:29 AM
[Add Comment]