JSFiddle - React, Tailwind, and code Playground

by Dan Mathisen

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>

<!-- filtering "Mono Cost" 7133.03 doesn't work but 7133.0332 does -->

JavaScript

var dataSource = new kendo.data.DataSource({
    data: [{
        "ModelName": "Unknown",
        "DefaultMonoCPP": 7133.0332,
        "DefaultColorCPP": 313.0325,
    }, {
        "ModelName": "LaserJet 4345",
        "DefaultMonoCPP": 1513.0312,
        "DefaultColorCPP": 151.0456,
    }, {
        "ModelName": "Nuvera 120",
        "DefaultMonoCPP": 134.0515,
        "DefaultColorCPP": 51.6459,
    }, {
        "ModelName": "LaserJet 4345",
        "DefaultMonoCPP": 1513.0312,
        "DefaultColorCPP": 151.0456,
    }, {
        "ModelName": "Nuvera 120",
        "DefaultMonoCPP": 134.0515,
        "DefaultColorCPP": 51.6459,
    }],
    batch: true,
    schema: {
        model: {
            id: "ModelID",
            fields: {
                ModelName: {
                    editable: false,
                    type: "string"
                    
                },
                DefaultMonoCPP: {
                    editable: false,
                    type: "number",  
                    parse: function(e)
                    {
                        console.log(e);
                        return kendo.toString(e,"c2"); 
                    }
                    
                    
                },
                DefaultColorCPP: {
                    editable: false,
                    type: "number"
                }
            }
        }
    }
});

$("#grid").kendoGrid({
    dataSource: dataSource,
    columns: [
        {
            field: "ModelName",
            title: "Model"
        }, {
            field: "DefaultMonoCPP",
            title: "Mono Cost",
            //format: '{0:c2}',
            filterable: {
                ui: function(e) {
                    e.kendoNumericTextBox({
                        format: "c2",
                        decimals: 2
                    });
                }
            }
        }, {
            field: "DefaultColorCPP",
            title: "Color Cost",

        }
    ],
    filterable: {
 ...