DataBound
eventsFired when the widget is bound to data from its data source.
The event handler function context (available via the this keyword) will be set to the widget instance.
<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) {
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log("dataBound");
}
});
</script>
<div id="grid"></div>
<script>
function grid_dataBound(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
console.log("dataBound");
}
$("#grid").kendoGrid({
autoBind: false,
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
var grid = $("#grid").data("kendoGrid");
grid.bind("dataBound", grid_dataBound);
grid.dataSource.fetch();
</script>
<style>
.k-grid {
width: 500px;
}
.critical {
background-color: #fdd;
}
.warning {
background-color: #fda;
}
.ok {
background-color: #ced;
}
</style>
<div id="grid-databound-dataitems"></div>
<script>
// sample datasource
var products = [
{ ID: 1, ProductName: "Foo", UnitsInStock: 9, Discontinued: false },
{ ID: 2, ProductName: "Bar", UnitsInStock: 16, Discontinued: false },
{ ID: 3, ProductName: "Baz", UnitsInStock: 3, Discontinued: true }
];
function getUnitsInStockClass(units) {
if (units < 5) {
return "critical";
} else if (units < 10) {
return "warning";
} else {
return "ok";
}
}
$(document).ready(function () {
$("#grid-databound-dataitems").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
id: "ID",
fields: {
ID: { type: "number" },
ProductName: { },
UnitsInStock: { type: "number" },
Discontinued: { type: "boolean" }
}
}
}
},
sortable: true,
columns: [
{ field: "ProductName", title: "Product Name" },
{ field: "UnitsInStock", title:"Units In Stock", width: "120px" },
{ field: "Discontinued", width: "120px" }
],
dataBound: function(e) {
// get the index of the UnitsInStock cell
var columns = e.sender.columns;
var columnIndex = this.wrapper.find(".k-grid-header [data-field=" + "UnitsInStock" + "]").index();
// iterate the table rows and apply custom cell styling
var rows = e.sender.tbody.children();
for (var j = 0; j < rows.length; j++) {
var row = $(rows[j]);
var dataItem = e.sender.dataItem(row);
var units = dataItem.get("UnitsInStock");
var cell = row.children().eq(columnIndex);
cell.addClass(getUnitsInStockClass(units));
}
}
});
});
</script>