Wednesday, December 3, 2014

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!!