JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<div id="grid"></div>
    <button id="btnchangedata" class="k-button" onclick="changedata()"> Change data</button>
 <button id="btnchangedata" class="k-button" onclick="replacedata()"> Replace data</button>

CSS

#grid table td {
    width: 175px;
    overflow: hidden;
}

JavaScript

$(document).ready(function () {
$("#grid").kendoGrid({
                dataSource: [
                    { name: "Jane Doe", age: 30 },
                    { name: "John Doe", age: 33 }
                  ]
            });
                
        });


        function changedata() {
            
var grid = $("#grid").data("kendoGrid");
grid.dataSource.add([{ name: "aaaa Doe", age: 30 },{ name: "aaaa Doe", age: 23 }]);

                   

           
        }
 function replacedata() {
      $("#grid").data("kendoGrid").dataSource.data([]);
     //$("#grid").data("kendoGrid").dataSource.data([{ name: "aaaa Doe", age: 30 },{ name: "aaaa Doe", age: 23 }]);
 }