dataBinding

Fired before the widget binds to its data source.

The event handler function context (available via the this keyword) will be set to the widget instance.

Event Data

e.sender kendo.ui.Grid

The widget instance which fired the event.

e.preventDefault Function

If invoked prevents the data bind action. The table rows will remain unchanged and dataBound event will not fire.

e.action String

The action that caused the dataBinding event. Possible values: rebind, sync, add, remove.

e.index Number

Available if the action is add or remove. Shows the index of the added/removed element.

e.items Array

The array of items that shows the elements that are going to be added/removed from the widget dataSource.

Example - subscribe to the "dataBinding" event before initialization

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  dataBinding: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log("dataBinding");
  }
});
</script>

Example - subscribe to the "dataBinding" event after initialization

<div id="grid"></div>
<script>
function grid_dataBinding(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log("dataBinding");
}
$("#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("dataBinding", grid_dataBinding);
grid.dataSource.fetch();
</script>