JSFiddle - React, Tailwind, and code Playground

by valchev

HTML

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
Test
<script type="text/x-kendo-template" id="template">
  <div class="toolbar">
   <a id="create" class="k-button k-button-icontext k-grid-add"><span class="k-icon k-add"></span>Add new record</a>
  </div>
</script>
<div id="grid"></div>

JavaScript

var newId = -1;

// pressing cancel on a new record removes the record completely
// 1. add new record
// 2. add new record
// 3. click edit on last new record, do not cancel and do not update
// 4. click edit on second last record (only "new" remaining)
// => last record vanishes
// 5. click edit on last record again (same as in 4.)
// => this record vanishes too
// 6. click edit on any record
// => nothing happens, editing is now broken until a new record is added

// alternative:
// add two new records
// edit b
// update b
// edit b
// edit new-2
// edit new-3
// edit new-3 (again)
// add two new records
// edit b
// update b
// edit b
// edit 5
// => b is gone.
// edit 4
// => 5 is gone
// edit 4
// => all records disappeared.
// if the second edit of new-3 is skipped, the record "a" would remain.

$(document).ready(function() {
    var data = [{Foo: "a.1", Bar: "a.2", Id: 1},{Foo: "b.1", Bar: "b.2", Id: 2}],
        counter = data.length;
    $("#grid").kendoGrid({
        dataSource: {
            transport: {
                read: function(o) {
                    //pass the date
                    o.success(data);
                },
                create: function(o) {
                    var item = o.data;
                    //assign a unique ID and return the record
                    counter++;
                    item.Id = counter;
                    o.success(item);
                },
                update: function(o) {
                    //edit the local array and mark the operation as successful
                    o.success();
                },
                destroy: function(o) {
                    //edit the local array and mark the operation as successful
                    o.success();   
                }
            },
            schema: {
                model: {
                    id: "Id",
                    fields: {
                        Foo: {editable: true, defaultValue: ""},
                        Bar: {editable:...