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.