ColdFusion Grid (CFGRID) Show/Hide Columns on button click event:
Recently got a question from ColdFusion usergroups asking for showing/hiding columns based on the button click event.Below script will do the same with out refreshing the page.
I used temporary query with the name testRQuery. SO replace this temporary query with your real time database query.
Please contact me at raghuramgreddy@gmail.com on customization of any ColdFusion grids OR grid search related jobs.
<cfset testRQuery = queryNew('testRid,testRName','integer,varchar') />
<cfset queryaddrow(testRQuery,1) />
<cfset querysetcell(testRQuery,'testRid',1) />
<cfset querysetcell(testRQuery,'testRName','Raghuram') />
<cfset queryaddrow(testRQuery,1) />
<cfset querysetcell(testRQuery,'testRid',2) />
<cfset querysetcell(testRQuery,'testRName','Reddy') />
<cfset queryaddrow(testRQuery,1) />
<cfset querysetcell(testRQuery,'testRid',3) />
<cfset querysetcell(testRQuery,'testRName','RaghuramG') />
<cfquery name="testRQuery" dbtype="query">
select * from testRQuery
</cfquery>
<form name="testR" ><input type="button" onclick="javascript:clearGrid();" value="Clear Grid"/></form>
<script type="text/javascript">
function clearGrid(){
grid = ColdFusion.Grid.getGridObject('testRGrid');
Ext.override(Ext.grid.GridPanel, {
getColumnModel: function(){return this.colModel;
} });
cols = grid.getColumnModel();
for (var i = 0; i < cols.getColumnCount(); i++) {
colid = cols.getColumnId(i);column = cols.getColumnById(colid);
if (column.hidden != true && column.header != 'CFGRIDROWINDEX'){
column.hidden = true;
}else if(column.header != 'CFGRIDROWINDEX'){
column.hidden = false;
}
}
grid.reconfigure(grid.getStore(),cols); grid.render();
ColdFusion.Grid.refresh("testRGrid",true);
}
</script>
<cfform>
<cfgrid name="testRGrid" format="html" query="testRQuery" width="500" height="100">
<cfgridcolumn name="testRID" header="testR ID" >
<cfgridcolumn name="testRName" header="testR Name" >
</cfgrid>
</cfform>
Happy Coding!!