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
1<cfset gridData = queryNew("col1,col2")>
2<cfloop from="1" to="5" index="i">
3 <cfset queryAddRow(gridData)>
4 <cfset querySetCell(gridData, "col1", "Row #i# Col 1", i)>
5 <cfset querySetCell(gridData, "col2", "Row #i# Col 2", i)>
6</cfloop>
7
8<cfscript>
9 args = structNew();
10 args.autowidth = true;
11 args.name = "myTestGrid";
12 args.format = "html";
13 args.width = "250";
14 args.query = "gridData";
15</cfscript>
16
17
18<cfform name="test">
19<cfgrid attributeCollection="#args#">
20 <cfgridcolumn name="col1" header="My 1st Col">
21 <cfgridcolumn name="col2" header="My 2nd Col">
22</cfgrid>
23</cfform>
2<cfloop from="1" to="5" index="i">
3 <cfset queryAddRow(gridData)>
4 <cfset querySetCell(gridData, "col1", "Row #i# Col 1", i)>
5 <cfset querySetCell(gridData, "col2", "Row #i# Col 2", i)>
6</cfloop>
7
8<cfscript>
9 args = structNew();
10 args.autowidth = true;
11 args.name = "myTestGrid";
12 args.format = "html";
13 args.width = "250";
14 args.query = "gridData";
15</cfscript>
16
17
18<cfform name="test">
19<cfgrid attributeCollection="#args#">
20 <cfgridcolumn name="col1" header="My 1st Col">
21 <cfgridcolumn name="col2" header="My 2nd Col">
22</cfgrid>
23</cfform>
The idea of the code will be to dynamically hide the first column onLoad.
1<!--- When using ajaxOnLoad you need the <script> needs to be in the HTML head --->
2<cfsavecontent variable="ScriptForHead">
3<script language="JavaScript" type="text/javascript">
4 hideCol = function(){
5 // Get the grid object
6 gridObj = ColdFusion.Grid.getGridObject('myTestGrid');
7 // Get the column model
8 cm = gridObj.getColumnModel();
9 // On a column we can run a host of methods. Check out
10 // http://www.culture.gov.sk/extras/yui-ext/docs/YAHOO.ext.grid.DefaultColumnModel.html
11 // I'm using http://www.culture.gov.sk/extras/yui-ext/docs/YAHOO.ext.grid.DefaultColumnModel.html#setHidden
12 cm.setHidden(0,true); // setHidden(colIndex, hidden)
13
14 // reload the grid
15 gridObj.reconfigure(gridObj.getDataSource(),cm);
16 }
17</script>
18</cfsavecontent>
19
20<cfhtmlhead text="#ScriptForHead#" />
21<!--- use AjaxOnLoad to Hide the column onLoad--->
22<cfset ajaxOnLoad('hideCol')>
2<cfsavecontent variable="ScriptForHead">
3<script language="JavaScript" type="text/javascript">
4 hideCol = function(){
5 // Get the grid object
6 gridObj = ColdFusion.Grid.getGridObject('myTestGrid');
7 // Get the column model
8 cm = gridObj.getColumnModel();
9 // On a column we can run a host of methods. Check out
10 // http://www.culture.gov.sk/extras/yui-ext/docs/YAHOO.ext.grid.DefaultColumnModel.html
11 // I'm using http://www.culture.gov.sk/extras/yui-ext/docs/YAHOO.ext.grid.DefaultColumnModel.html#setHidden
12 cm.setHidden(0,true); // setHidden(colIndex, hidden)
13
14 // reload the grid
15 gridObj.reconfigure(gridObj.getDataSource(),cm);
16 }
17</script>
18</cfsavecontent>
19
20<cfhtmlhead text="#ScriptForHead#" />
21<!--- use AjaxOnLoad to Hide the column onLoad--->
22<cfset ajaxOnLoad('hideCol')>
Complete code should look like this:
1<!--- When using ajaxOnLoad you need the <script> needs to be in the HTML head --->
2<cfsavecontent variable="ScriptForHead">
3<script language="JavaScript" type="text/javascript">
4 hideCol = function(){
5 // Get the grid object
6 gridObj = ColdFusion.Grid.getGridObject('myTestGrid');
7 // Get the column model
8 cm = gridObj.getColumnModel();
9 // On a column we can run a host of methods. Check out
10 cm.setHidden(0,true);
11 // reload the grid
12 gridObj.reconfigure(gridObj.getDataSource(),cm);
13 }
14</script>
15</cfsavecontent>
16
17<cfhtmlhead text="#ScriptForHead#" />
18<!--- use AjaxOnLoad to Hide the column onLoad--->
19<cfset ajaxOnLoad('hideCol')>
20
21
22<cfset gridData = queryNew("col1,col2")>
23<cfloop from="1" to="5" index="i">
24 <cfset queryAddRow(gridData)>
25 <cfset querySetCell(gridData, "col1", "Row #i# Col 1", i)>
26 <cfset querySetCell(gridData, "col2", "Row #i# Col 2", i)>
27</cfloop>
28
29<cfscript>
30 args = structNew();
31 args.autowidth = true;
32 args.name = "myTestGrid";
33 args.format = "html";
34 args.width = "250";
35 args.query = "gridData";
36</cfscript>
37
38
39<cfform name="test">
40<cfgrid attributeCollection="#args#">
41 <cfgridcolumn name="col1" header="My 1st Col">
42 <cfgridcolumn name="col2" header="My 2nd Col">
43</cfgrid>
44</cfform>
2<cfsavecontent variable="ScriptForHead">
3<script language="JavaScript" type="text/javascript">
4 hideCol = function(){
5 // Get the grid object
6 gridObj = ColdFusion.Grid.getGridObject('myTestGrid');
7 // Get the column model
8 cm = gridObj.getColumnModel();
9 // On a column we can run a host of methods. Check out
10 cm.setHidden(0,true);
11 // reload the grid
12 gridObj.reconfigure(gridObj.getDataSource(),cm);
13 }
14</script>
15</cfsavecontent>
16
17<cfhtmlhead text="#ScriptForHead#" />
18<!--- use AjaxOnLoad to Hide the column onLoad--->
19<cfset ajaxOnLoad('hideCol')>
20
21
22<cfset gridData = queryNew("col1,col2")>
23<cfloop from="1" to="5" index="i">
24 <cfset queryAddRow(gridData)>
25 <cfset querySetCell(gridData, "col1", "Row #i# Col 1", i)>
26 <cfset querySetCell(gridData, "col2", "Row #i# Col 2", i)>
27</cfloop>
28
29<cfscript>
30 args = structNew();
31 args.autowidth = true;
32 args.name = "myTestGrid";
33 args.format = "html";
34 args.width = "250";
35 args.query = "gridData";
36</cfscript>
37
38
39<cfform name="test">
40<cfgrid attributeCollection="#args#">
41 <cfgridcolumn name="col1" header="My 1st Col">
42 <cfgridcolumn name="col2" header="My 2nd Col">
43</cfgrid>
44</cfform>
Comments (1) | 
Print |
Send |
4181 Views
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?