JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.dataviz.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<div id="grid"></div>
</br>
</br>
</br>
The Sum is:
<label id="weight-label" ></label>
JavaScript
var data = [
{ item: "item1", weight: 15 },
{ item: "item2", weight: 22 },
{ item: "item3", weight: 43 },
{ item: "item4", weight: 37 },
{ item: "item5", weight: 33 }
];
$("#grid").kendoGrid({
columns: [
{ field: "item" },
{ field: "weight" }
],
filterable: true,
sortable: true,
pageable: true,
resizable:true,
selectable: "row",
columnMenu: true,
dataSource:data ,
change: function(e) {
alert(3);
var grid = e.sender;
var selected = grid.dataItem(this.select());
alert(selected.item);
getSum();
}
});
getSum();
function getSum() {
var grid = $("#grid").data("kendoGrid");
var data = grid.dataSource.view();
var sum = 0;
for ( var i = 0; i<= (data.length-1);i++) {
sum = sum + data[i].weight;
}
$("#weight-label").text(sum);
}