Ever want to stop the ability to resize columns in a CFGRID? There isn't a way to do this via tags, but as with other CFGRID hacks, you can do it once you get access to the underlying grid object. Let's look at an example.
First, here is a simple grid using a hand-made query.
<cfset data = queryNew("price,product")> <cfloop from=1 to=10 index="x"> <cfset total = randRange(20,100) & "." & randRange(1,99)> <cfset product = "Product #X#"> <cfset queryAddRow(data)> <cfset querySetCell(data, "price", total+0, x)> <cfset querySetCell(data, "product", product, x)> </cfloop><p/>
<cfform name="test"> <cfgrid autowidth="true" name="data" format="html" query="data" width="400"> <cfgridcolumn name="price" header="Price"> <cfgridcolumn name="product" header="Product"> </cfgrid> </cfform>
If you view this in your browser you will see that bother columns are resizable. To block resizing, we need to write code that will run page load, grab the column model, and modify the columns.
First, add the ajaxOnLoad:
<cfset ajaxOnLoad("fixgrid")>and then we will use the following simple JavaScript:
fixgrid = function() { mygrid = ColdFusion.Grid.getGridObject('data') cm = mygrid.getColumnModel();for(var i=0; i<cm.getColumnCount();i++) { col = cm.getColumnById(i) col.resizable=false }
mygrid.reconfigure(mygrid.getDataSource(),cm); }
In the code above, cm represents all our columns. We can grab each one by their index and simply set the resizable property. The reconfigure option resets the grid and now our columns aren't resizable. I created a quick Jing video (no audio) that demonstrates this.