JSFiddle - React, Tailwind, and code Playground

by valchev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.dataviz.min.css">
<div style="-webkit-transform: translateZ(0)"></div>
<div id="grid"></div>

JavaScript

var products = [ {
                    "ProductID": 1,
                        "ProductName": "Chai",
                        "Category": "Beverages",
                        "UnitPrice": "18.00"
                }, {
                    "ProductID": 2,
                        "ProductName": "Chang",
                        "Category": "Beverages",
                        "UnitPrice": "19.00"
                }, {
                    "ProductID": 3,
                        "ProductName": "Aniseed Syrup",
                        "Category": "Condiments",
                        "UnitPrice": "10.00"
                }, {
                    "ProductID": 4,
                        "ProductName": "Chef Anton's Cajun Seasoning",
                        "Category": "Condiments",
                        "UnitPrice": "22.00"
                }, {
                    "ProductID": 5,
                        "ProductName": "Chef Anton's Gumbo Mix",
                        "Category": "Condiments",
                        "UnitPrice": "21.35"
                }, {
                    "ProductID": 6,
                        "ProductName": "Grandma's Boysenberry Spread",
                        "Category": "Condiments",
                        "UnitPrice": "25.00"
                }];


                    var dataSource = new kendo.data.DataSource({
                       pageSize: 30,
                       data: products,
                       autoSync: true,
                       schema: {
                           model: {
                             id: "ProductID",
                             fields: {
                                ProductID: { editable: false, nullable: true },
                                ProductName: { validation: { required: true } },
                                Category: "Category",
                                UnitPrice: { type: "number", validation: { required: true, min: 1} }
                             }
                          ...