Showing posts with label coldfuson grid columns show hide. Show all posts
Showing posts with label coldfuson grid columns show hide. Show all posts

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