Kendo Grid and Chart
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.621/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.2.621/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.621/styles/kendo.mobile.all.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.621/styles/kendo.default.min.css">
<div id="grid"></div>
<div>Avg Value:<span id="val">an</span></div>
JavaScript
var sharedDataSource = new kendo.data.DataSource({
data: [
{ id: 1, itemValue: 10, item: "Item1" },
{ id: 2, itemValue: 12, item: "Item2" },
{ id: 3, itemValue: 15, item: "Item3" },
{ id: 4, itemValue: 10, item: "Item4" },
{ id: 5, itemValue: 10, item: "Item5" },
{ id: 6, itemValue: 11, item: "Item6" }
],
schema: {
model: {
id: "id",
fields: {
id: { type: "number", editable: false },
itemValue: { type: "number" },
item: { type: "string" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: sharedDataSource,
change: calcAvg,
dataBound: calcAvg,
autoBind: false,
editable: true,
toolbar: ["save", "cancel"]
});
function calcAvg()
{
var grid = GetGrid('grid')
if (grid == null) return;
var ds = grid.dataSource;
if (ds == null) return;
var data = ds.data();
if (data == null) return;
var target = $('#val');
var vSum = 0.0;
if (data && target) {
for (var i = 0; i < data.length; i++) {
vSum += data[i].itemValue;
}
var avg = vSum/data.length;
if(avg < 10 || avg > 15)
target.html("out of range");
else
target.html(avg.toString());
//var out = avg < 10 || avg < 15 ? "out of range" : avg.ToString();
//target.html(out);
}
}
function GetGrid(gridId) {
return $('#' + gridId).data("kendoGrid");
}
calcAvg();
sharedDataSource.read();
$('.k-grid-save-changes').on('click', '', onChange);