JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<div id="grid"></div>
<br />
<input type="button" id="btnAggregate" value="Aggregate" />
<input type="button" id="btnFilter" value="Filter" />
<input type="button" id="btnRead" value="Read" />
<br />
<p id="display"></p>
CSS
#display {
color: red;
}
JavaScript
var errorsCollection;
var dataSource = new kendo.data.DataSource({
schema: {
data: function(data) {
errorsCollection = data.Errors;
return data.SearchingResults;
},
model: {
id: "foo",
fields: {
foo: {
type: "number"
},
bar: {
type: "string"
}
}
}
},
serverAggregates: false,
serverFiltering: false,
transport: {
read: {
//using jsfiddle echo service to simulate JSON endpoint
url: "/echo/json/",
dataType: "json",
type: "POST",
data: {
// /echo/json/ echoes the JSON which you pass as an argument
json: JSON.stringify({
SearchingResults: [
{ foo: 1, bar: "a" },
{ foo: 2, bar: "b" },
{ foo: 3, bar: "c" }
],
Errors: [
{ baz: "This is an e" }
]
})
}
}
},
change: function(e) {
$("#display").html("Errors: " + JSON.stringify(errorsCollection));
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
columns: ["foo", "bar"]
});
$("#btnAggregate").click(function(e) {
dataSource.aggregate({ field: "foo", aggregate: "count" });
});
$("#btnFilter").click(function(e) {
dataSource.filter({ field:"foo", operator:"eq", value:1 });
});
$("#btnRead").click(function(e) {
dataSource.read();
});