JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.web.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.silver.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<div id="grid"></div>
JavaScript
var data = [{
"ProductID": 1,
"ProductName": "Chai2",
"UnitPrice": 18,
"UnitsInStock": 39,
"Discontinued": false},
{
"ProductID": 2,
"ProductName": "Changytyty",
"UnitPrice": 20,
"UnitsInStock": 17,
"Discontinued": false},
{
"ProductID": 3,
"ProductName": "Aniseed Syrup789",
"UnitPrice": 11,
"UnitsInStock": 15,
"Discontinued": true},
{
"ProductID": 4,
"ProductName": "Chef Anton\u0027s Cajun Seasoning",
"UnitPrice": 22,
"UnitsInStock": 53,
"Discontinued": false},
{
"ProductID": 5,
"ProductName": "Chef Anton\u0027s Gumbo Mix",
"UnitPrice": 21.35,
"UnitsInStock": 0,
"Discontinued": true},
{
"ProductID": 6,
"ProductName": "Grandma\u0027s Boysenberry Spread",
"UnitPrice": 25,
"UnitsInStock": 120,
"Discontinued": false}];
var dataSource = new kendo.data.DataSource({
data: data,
sort: [{field: "ProductName", dir: "desc"}],
schema: {
model: {
id: "ProductID",
fields: {
ProductID: {
nullable: false,
type: "number",
defaultValue: 0
},
ProductName: {
validation: {
required: true
}
},
UnitPrice: {
type: "number"
},
Discontinued: {
type: "boolean"
},
UnitsInStock: {
type: "number"
}
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
toolbar: ["create"],
columns: [
{
field: "ProductName",
title: "Product Name"
},
{
field: "UnitPrice",
title: "Unit Price",
format: "{0:c}",
},
{
field: "UnitsInStock",
title: "Units In Stock"
},
{
field:...