JSFiddle - React, Tailwind, and code Playground

by valchev

HTML

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

JavaScript

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

var categories = [{
    "value": "",
    "text": "Please select"
},{
    "value": 1,
    "text": "Beverages"
},{
    "value": 2,
    "text": "Condiments"
},{
    "value": 3,
    "text": "Confections"
},{
    "value": 4,
    "text": "Dairy Products"
},{
    "value": 5,
    "text": "Grains/Cereals"
},{
    "value": 6,
    "text": "Meat/Poultry"
},{
    "value": 7,
    "text": "Produce"
},{
    "value": 8,
    "text": "Seafood"
}];

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

$("#grid").kendoGrid({
    dataSource: dataSource,
    filterable: true,
    scrollable: false,
    toolbar: ["create"],
    columns: [
        { field:"ProductName",title:"Product Name" },
        { field: "CategoryID", width: "150px", values: categories, title: "Category" },
        { field: "UnitPrice", title:"Unit Price", format:...