JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.2.621/js/kendo.all.min.js"></script>
<div id="grid"></div>
<button id="delete">Delete Row</button>

JavaScript

var localDataSource = new kendo.data.DataSource({
    data: [{firstName: "Mike", age: 25}, {firstName: "Chris", age: 30}, {firstName:"John", age: 29}],
    aggregate: [{field: "age", aggregate: "sum"}]   
});

var element = $(grid).kendoGrid({
    dataSource: localDataSource,
    columns: [{title: "First Name", field:"firstName"},
              {title: "Age", field:"age", aggregates:"sum", width:0, footerTemplate:"#= sum #"}],
    autoBind: true        
});


$('#delete').click(function(){
    var theGrid = $('#grid').data('kendoGrid');
   // alert(theGrid.dataSource.data().length);
    
    if(theGrid.dataSource.data().length > 0)
    {
        theGrid.dataSource.data().splice(0, 1);
    }
})