JSFiddle - React, Tailwind, and code Playground

by siliconsoul

HTML

<script src="http://cdn.kendostatic.com/2013.1.514/js/kendo.all.min.js"></script>
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.common.min.css">
<!-- grid element -->
<div id="grid" style="width: 700px; margin: 0 auto;"></div>

JavaScript

var data = createRandomData(50);
var autoCompleteDS = new kendo.data.DataSource({
    data: [
        {
        firstName: "Alex"},
    {
        firstName: "Alice"},
    {
        firstName: "Antony"},
    {
        firstName: "Anne"},
    {
        firstName: "Anna"}
    ]
});

$(document).ready(function() {
    $("#grid").kendoGrid({
        navigatable: true,
        dataSource: {
            data: data,
            schema: {
                model: {
                    fields: {
                        FirstName: {
                            type: "string"
                        },
                        LastName: {
                            type: "string"
                        },
                        City: {
                            type: "string"
                        },
                        Title: {
                            type: "string"
                        },
                        BirthDate: {
                            type: "date"
                        },
                        Age: {
                            validation: {
                               required:true,
                               ageCheck: function(input){
                                   if (input.attr("name") == "Age"){
                                       input.attr("data-ageCheck-msg", "Age must be greater than 10");
                                       return input.val() > 10;
                                   }
                                   return true;
                                }
                            }
                        }
                    }
                }
            },
            pageSize: 10
        },
        height: 450,
        scrollable: true,
        sortable: true,
        pageable: true,
        editable: {
            mode: "incell",
        },
        toolbar: ["create"],
        columns: [
            {
            field: "FirstName",
            title: "First Name",
            width: 100},
...