Quick CFGRID Tip - disable sorting

I really feel like this is something I’ve blogged before, or someone else, but Google is failing to find the result for me so I figure a quick blog entry is in order. How do you disable sorting for one column using the new HTML-based grids in ColdFusion 8? The answer involves going into the Ext docs and using their API. Let’s start with a simple grid using inline data:

<cfquery name="entries" datasource="blogdev"> select * from tblblogentries limit 0,10 </cfquery>

<cfform name=”test”> <cfgrid autowidth=”true” name=”entries” format=”html” query=”entries” width=”600”> <cfgridcolumn name=”id” display=”false”> <cfgridcolumn name=”body” display=”false”>

<cfgridcolumn name=”title” header=”Title”> <cfgridcolumn name=”posted” header=”Posted”> </cfgrid> </cfform> </code>

Now let’s run some code on startup:

<cfset ajaxonload("fixgrid")>

This code will run JavaScript to handle our modification:

<script> function fixgrid() { g = ColdFusion.Grid.getGridObject('entries'); // console.dir(g); cols = g.getColumnModel(); for(var i=0; i < cols.getColumnCount(); i++) { var thisid = cols.getColumnId(i); var thiscol = cols.getColumnById(thisid); if(thiscol.header == "Title") thiscol.sortable = false; } } </script>

All this code does is ask for the Ext Grid object that CF uses behind the scenes. I get the column model (an API to the columns), and then search for the proper column. Ext provides a clean getColumnById API, but since you can’t set the IDs yourself, you have to search as I did above. Note that I disabled sorting where the header was Title.

That’s it. Enjoy.

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Comments