JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<div class="k-grid-pager"></div>

<div id="log">            
</div>

<div class="k-grid-pager"></div>

JavaScript

var dataSource = new kendo.data.DataSource({
    data: [
        { id: 1, name: "Product1", stock: 10},
        {id: 2,name: "Product2", stock: 20 },
        { id: 3, name: "Product3", stock: 30 }
          ],
    schema: { // required if get method will be used
        model: {
            id: "id"
        }
    }
})

dataSource.read();

dataSource
    .bind("change", function() {
        var log = $("#log");
        log.append("<P>total records in datasource is " + this.total() + "</p>"  );       
        log.append("<p>total stovck is " + dataSource.aggregates().stock.sum + "</p>" );
    })
    .aggregate({ field: "stock", aggregate: "sum" });