JSFiddle - React, Tailwind, and code Playground

by andreigavrila

HTML

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

JavaScript

var data = [
      { Id: 1, Name: "Decision 1", Code: 1 },
      { Id: 2, Name: "Decision 2", Code: 2 },
      { Id: 3, Name: "Decision 3", Code: 3 }
    ]; 

$("#grid").kendoGrid({
            dataSource: {
                error: function (a) {
                    console.log('error');
                    $('#grid').data("kendoGrid").cancelChanges();
                                                           
                    //$('#grid').data("kendoGrid").one("dataBinding", function (e) {
                       //e.preventDefault();   // cancel grid rebind
                    //});
                },
                transport: {
                    read: function(e) {                                
                      e.success({data: data});
                    },
                    create: function(e) { 
                      console.log('creating');
                      e.error();
                    }, 
                    destroy: function(e) { 
                      console.log('deleting')
                      e.error();
                    }
                },
                schema: {
                    data: "data",
                    model: {
                        id: "Id",
                        fields: {
                            Id: { type: "number" },
                            Code: { type: "number" },
                            Name: { type: "string" }
                        }
                    }
                },
                pageSize: 10,
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true
            },
            height: 430,
            toolbar: ["create"],
            columns: [
                { field: "Code", title: "Code", },
                { field: "Name", title: "Name" },
                { command: ["destroy"], title: "&nbsp;" }],
            editable: {
                mode: "popup"
            },
            filterable: true,
            sortable:...