CFgrid is the one of the most coolest ajax feature provided by coldfusion.
Here i have used a static Cfgrid to explain how we can hide and show the cfgrid columns.
comments are self explainatory
//Declare and define the Sql query
VARIABLES.myQuery = "SELECT FIRSTNAME,LASTNAME,ADDRESS,CITY FROM ARTISTS";
//Store the Query Result into a variable
VARIABLES.result = new Query(name="artGallery" , datasource="cfartgallery", sql=VARIABLES.myQuery).execute().getResult();
cfgrid javascript Example
body{padding:30px;}
Show/hide city column
//This function show and hide the cfgrid column
//it takes three arguments
//id of the checkBox
//Name of the Column which you want to hide
//Width of the column
var ShowHide = function(id,columnName,width){
if($("#"+id).is(':checked'))
{
ShowHideColumn(columnName,false,width);
}
else
{
ShowHideColumn(columnName,true,0);
}
};
var ShowHideColumn = function(columnName,boolValue,width){
// Get the grid object
var gridObject = ColdFusion.Grid.getGridObject("mycfGrid");
// Get the column model
var columnModel = gridObject.getColumnModel();
var columnNo = gridObject.colModel.getIndexById(columnName);
//set the width of Cfgrid
gridObject.colModel.setColumnWidth(columnNo,width);
//This funtion show and hide column of cfgrid
columnModel.setHidden(columnNo,boolValue);
// reload the grid
gridObject.reconfigure(gridObject.getStore(),columnModel);
}