Search code examples
extjscoldfusioncfgrid

cfgridcolumn mask to format numbers

According to the docs, I should be able to use the mask attribute to format my column:

<cfgridcolumn name="salary" type="numeric" mask="$999,999">

I have a salary amount I want to show as

$100,000
 $80,000
  $5,000

Any ideas why its not working?

Full code snipit for testing below.

<cfscript>
        rs = QueryNew('salary', 'integer');
        QueryAddRow(rs,3);
        QuerySetCell(rs, 'salary', '100000', 1);
        QuerySetCell(rs, 'salary', '80000', 2);
        QuerySetCell(rs, 'salary', '5000', 3);
</cfscript>

<cfform>
    <cfgrid format="html" name="demo" query="rs">
        <cfgridcolumn name="salary" type="numeric" mask="$999,999">
    </cfgrid>
</cfform>
Solution

  • I need to give props to @Henry for this answer that I found here and applied to your case. I had not used this before but I tested it and it does work (using CF9). See this other reference that I found as well. Interesting stuff. Anyway...

    For your issue try this code:

    <html>
    <head><title>Test</title></head>
<body>
<cfsavecontent variable="formatGridInit">
<script language="javaScript">
formatgrid = function() {
    var myFormatter = Ext.util.Format.numberRenderer('$000,000');
    var mygrid = ColdFusion.Grid.getGridObject('demo');
    var cm = mygrid.getColumnModel();
    cm.setRenderer(0, myFormatter);
    mygrid.reconfigure(mygrid.getStore(),cm);
};
</script>
</cfsavecontent>
<cfhtmlhead text="#formatGridInit#">
<cfset ajaxOnLoad("formatgrid")>

<cfscript>
        rs = QueryNew('salary', 'integer');
        QueryAddRow(rs,3);
        QuerySetCell(rs, 'salary', '100000', 1);
        QuerySetCell(rs, 'salary', '80000', 2);
        QuerySetCell(rs, 'salary', '5000', 3);
</cfscript>

<cfform>
    <cfgrid format="html" name="demo" query="rs">
        <cfgridcolumn name="salary" type="numeric">
    </cfgrid>
</cfform>
</body>
</html>

    NOTE - Make sure your HTML has <head></head> in order for the <cfhtmlhead> to work.

    NOTE - The grid name in this code var mygrid = ColdFusion.Grid.getGridObject('demo'); must match your grid's name.

    NOTE - Set the number in this code cm.setRenderer(0, myFormatter); to the column that you want to apply the format to (columns in the grid are zero based).