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>
Feed
Twitter
Recent tunes
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?