JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
                <div style="margin: 10px 0;">
                    <button id="insert" class="k-button k-state-disabled" disabled="1"><span class="k-icon k-i-plus"></span> Satır Ekle</button>
                    <button id="update" class="k-button k-state-disabled" disabled="1"><span class="k-icon k-i-pencil"></span> Düzenle</button>
                    <button id="save" class="k-button"><span class="k-icon k-i-tick"></span> Kaydet</button>
                    <button id="cancel" class="k-button k-state-disabled" disabled="1"><span class="k-icon k-i-cancel"></span> İptal</button>
                    <button id="remove" class="k-button k-state-disabled" disabled="1"><span class="k-icon k-i-close"></span> Sil</button>
                </div>

                <div id="grid"></div>

JavaScript

var insert = $('#insert');
var update = $('#update');
var save = $('#save');
var cancel = $('#cancel');
var remove = $('#remove');

insert.click(function() {
    $('#grid').data('kendoGrid').addRow();

    insert.attr('disabled', 1).addClass('k-state-disabled');
    update.attr('disabled', 1).addClass('k-state-disabled');
    save.removeAttr('disabled').removeClass('k-state-disabled');
    cancel.removeAttr('disabled').removeClass('k-state-disabled');
    remove.attr('disabled', 1).addClass('k-state-disabled');
});

update.click(function() {
    var grid = $('#grid').data('kendoGrid');
    var selectedrows = grid.tbody.find('>tr.k-state-selected');

    if ( selectedrows.length < 1 ) {
        $.notice({
            text: 'Lütfen düzenlemek istediğiniz satırı seçiniz.',
            type: 'info'
        });
    } else if ( selectedrows.length > 1 ) {
        $.notice({
            text: 'Lütfen düzenlemek için sadece 1 satır seçiniz.',
            type: 'info'
        });
    } else {
        grid.editRow(selectedrows);

        insert.attr('disabled', 1).addClass('k-state-disabled');
        update.attr('disabled', 1).addClass('k-state-disabled');
        save.removeAttr('disabled').removeClass('k-state-disabled');
        cancel.attr('disabled', 1).addClass('k-state-disabled');
        remove.attr('disabled', 1).addClass('k-state-disabled');
    }
});

save.click(function() {
    $('#grid').data('kendoGrid').saveRow();

    insert.removeAttr('disabled').removeClass('k-state-disabled');
    update.removeAttr('disabled').removeClass('k-state-disabled');
    save.attr('disabled', 1).addClass('k-state-disabled');
    cancel.attr('disabled', 1).addClass('k-state-disabled');
    remove.removeAttr('disabled').removeClass('k-state-disabled');
});

cancel.click(function() {
    $('#grid').data('kendoGrid').cancelRow();

    insert.removeAttr('disabled').removeClass('k-state-disabled');
    update.removeAttr('disabled').removeClass('k-state-disabled');
   ...