JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<head>
  <meta name="viewport" content="width=device-width" />
  <title></title>
</head>
<body>
  <div id="example" class="k-content">
    <table id="grid"></table>
  </div>
</body>

JavaScript

var totalRecords = 0;
$(document).ready(function() {
    $("#grid").kendoGrid({
        columns: [
            {
            field: "FirstName",
            title: "First Name"},
        {
            field: "LastName",
            title: "Last Name"}],
        sortable: true,
        dataSource: {
            data: [
                {
                FirstName: totalRecords,
                LastName: "Smith"},
            {
                FirstName: "Jane",
                LastName: "Smith"}],
            change: onChange
        }
    });

    function onChange() {
        alert(totalRecords);
        totalRecords = totalRecords + 1;
        var grid = $("#grid").data("kendoGrid");
        grid.refresh();
        alert(totalRecords);
    }
});