JSFiddle - React, Tailwind, and code Playground

by Dan Mathisen

HTML

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

CSS

body {
    margin-right: 35px; /* so the annoying "result" button doesn't block the filter
}

JavaScript

var dataSource = new kendo.data.DataSource({
    data: [
        {
            "ModelName": "Unknown",
            "DefaultMonoCPP": 1
        }, {
            "ModelName": "LaserJet 4345",
            "DefaultMonoCPP": 0.0016
        }, {
            "ModelName": "Nuvera 120",
            "DefaultMonoCPP": 0
        }, {
            "ModelName": "LaserJet 4345",
            "DefaultMonoCPP": 0.0791
        }, {
            "ModelName": "Nuvera 120",
            "DefaultMonoCPP": 0.0028
        }, {
            "ModelName": "Nuvera 120",
            "DefaultMonoCPP": 0.1253
        }, {
            "ModelName": "Nuvera 120",
            "DefaultMonoCPP": 0.0127
        }
    ],
    batch: true,
    schema: {
        model: {
            fields: {
                ModelName: {
                    editable: false,
                    type: "string"
                },
                DefaultMonoCPP: {
                    editable: false,
                    type: "number",  
                    parse: function(e) {
                        console.log(e, kendo.parseFloat(kendo.toString(e,"p4")));
                        return  kendo.parseFloat(kendo.toString(e,"p4")); 
                    }
                }
            }
        }
    }
});

$("#grid").kendoGrid({
    dataSource: dataSource,
    columns: [
        {
            field: "ModelName",
            title: "Model"
        }, {
            field: "DefaultMonoCPP",
            title: "Mono Cost",
            format: '{0:p4}',
            filterable: {
                ui: function(e) {
                    e.kendoNumericTextBox({
                        //format: "{0:p4}",
                        //format: "p4",
                        format: '{0:p4}',
                        step: 0.01,
                        decimals: 4,
                        change: function () {
                            console.log("change!");
                            var val = this.value();
                            if (val >...