Kendo Grid column filter formatting

Filter formatting when working with dynamically generated columns

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<div id="grid"></div>

CSS

#grid {
    margin-top: 30px;
}

JavaScript

// this is irrelevant for this example
var dataSource = new kendo.data.DataSource({
    data: [
        { ModelName: "Unknown", DefaultMonoCPP: 7133.0332, DefaultColorCPP: .0325 },
        { ModelName: "LaserJet 4345", DefaultMonoCPP: 1513.0312, DefaultColorCPP: .0456 },
        { ModelName: "Nuvera 120", DefaultMonoCPP: 134.0515, DefaultColorCPP: .0459 },
        { ModelName: "LaserJet 4345", DefaultMonoCPP: 1513.0312, DefaultColorCPP: .0456 },
        { ModelName: "Nuvera 120", DefaultMonoCPP: 134.0515, DefaultColorCPP: .0459 }
    ],
    schema: {
        model: {
            id: "ModelID",
            fields: {
                ModelName: { type: "string" },
                DefaultMonoCPP: { type: "number" },
                DefaultColorCPP: { type: "number" }
            }
        }
    }
});

// define fields (returned from a database, so we can dynamically generate columns)
var fields = [
    {
        field: "ModelName",
        title: "Model",
        type: "string",
        format: ""
    },
    {
        field: "DefaultMonoCPP",
        title: "Mono Cost",
        type: "number",
        format: "c2"
    },
    {
        field: "DefaultColorCPP",
        title: "Some Percentage",
        format: "p2"
    }
];

// generate columns
var cols = [];
for (var i = 0; i < fields.length; i++) {
    var item = fields[i];
        
    // create column object
    var col = {
        field: item.field,
        title: item.title
    }
    
    // if column is a number add column and filter formatting
    if (item.type === "number") {
        col["format"] = "{0:" + item.format + "}"; // column formatting (works)
        
        // filter formatting
        // doesn't work (maybe becuase it's not a string?) - format: "c2" vs format: c2
        col["filterable"] = {
            ui: function (e) {
                e.kendoNumericTextBox({
                    format: item.format
                });
            }
        }
    }
    
    cols.push(col); // add each column...