Reputation: 13
In Kendo JQuery Grid, I'm not being able to get dataBound event work event in this trivial example. However, the dataBinding event is fired as expected. What I'm doing wrong?
Can't find any meaningful difference compared with the Telerik grid event demo. https://demos.telerik.com/kendo-ui/grid/events
Any hint will be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="kendo/content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="kendo/styles/kendo.common.min.css" rel="stylesheet">
<link href="kendo/styles/kendo.default.min.css" rel="stylesheet">
<link href="kendo/styles/kendo.default.mobile.min.css" rel="stylesheet">
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.all.min.js"></script>
<title></title>
</head>
<body>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
databound: function (e) {
console.log("dataBound"); //Not firing
},
dataBinding: function (e) {
console.log("dataBinding"); //Firing
}
});
</script>
</body>
</html>
Upvotes: 1
Views: 1610
Reputation: 2168
It's a minor mistake - check the case on your event names, databound should be dataBound:
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
dataBound: function (e) {
console.log("dataBound"); //Not firing
},
dataBinding: function (e) {
console.log("dataBinding"); //Firing
}
});
</script>
Upvotes: 1