JSFiddle - React, Tailwind, and code Playground
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)
{
return kendo.toString(e,"n2");
}
},
DefaultColorCPP: {
editable: false,
type: "number"
}
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
columns: [
{
field: "ModelName",
title: "Model"
}, {
field: "DefaultMonoCPP",
title: "Mono Cost",
}, {
field: "DefaultColorCPP",
title: "Color Cost",
renderType: 'number'
}
],
filterable: {
extra: false
}
});