JSFiddle - React, Tailwind, and code Playground

by siliconsoul

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<a href="#" id="button1" class="k-button">Disable Firstname</a>
<a href="#" id="button2" class="k-button">Enable Firstname</a>
<a href="#" id="button3" class="k-button">Add Row</a>
<div id="grid"></div>

JavaScript

var grid = $("#grid").kendoGrid({
    dataSource: {
        data    : createRandomData(5),
        pageSize: 10,
        schema  : {
            model: {
                fields: {
                    id       : { type: 'number' },
                    FirstName: { type: 'string' },
                    LastName: { type: 'string',
                               validation: {
                                   required: true,
                                   noduplicate: function (input) {
                                       if (input.is("[name='LastName']") && input.val() !== "") {
                                           input.attr("data-noduplicate-msg", "The last name should be unique.")
                                           var value = input.val();
                                           var items = grid.dataSource.data().filter(function (item) {
                                               return item.LastName === value;
                                           });
                                           return items.length < 2;
                                       }
                                       return true;
                                   }
                               }
                    },
                    City     : { type: 'string' },
                    Title    : { type: 'string' },
                    BirthDate: { type: 'date' },
                    Age      : { type: 'number' }
                }
            }
        }
    },
    editable  : "incell",
     batch: true,
    navigatable: true,
    pageable  : {
        refresh  : true,
        pageSizes: true
    },
    columns   : [
        {
            field: "FirstName",
            width: 90,
            title: "First Name"
        } ,
        {
            field: "LastName",
            width: 90,
            title: "Last Name"
         
        } ,
        {
            width: 100,
            field: "City"
        } ,
        {
            field:...