Quick CFGRID Tip - disable sorting

This post is more than 2 years old.

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>

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 senior developer evangelist for Adobe. He focuses on document services, JavaScript, 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

Archived Comments

Comment 1 by Mat Evans posted on 9/19/2008 at 7:46 PM

On a slightly different subject ExtJS have a very nice air app that contains all the docs for their JS components - very handy for looking these kind of things up.

Nice tip!

Mat

Comment 2 by jose diaz posted on 2/25/2009 at 4:41 PM

Thanks Ray just what I needed. :)

Comment 3 by freddy valone posted on 2/13/2010 at 1:09 AM

Is there a way to make the sort function be non-case sensitive? All my text fields sort Uppercase first a-z then lowercase values a-z. I tried adding type="text_noCase" to the fields but no luck