Fires when the grid selection has changed.

Example

 $("#grid").kendoGrid({
     change: function(e) {
         // handle event
     }
 });

To set after initialization

 // get a reference to the grid
 var grid = $("#grid").data("kendoGrid");
 // bind to the change event
 grid.bind("change", function(e) {
     // handle event
 }

Fires when the grid has received data from the data source.

Example

 $("#grid").kendoGrid({
     dataBound: function(e) {
         // handle event
     }
 });

To set after initialization

 // get a reference to the grid
 var grid = $("#grid").data("kendoGrid");
 // bind to the dataBound event
 grid.bind("dataBound", function(e) {
     // handle event
 }

Fires when the grid detail row is collapsed.

Example

 $("#grid").kendoGrid({
     detailCollapse: function(e) {
         // handle event
     }
 });

To set after initialization

 // get a reference to the grid
 var grid = $("#grid").data("kendoGrid");
 // bind to the detailCollapse event
 grid.bind("detailCollapse", function(e) {
     // handle event
 }

Event data

masterRow : Object: The jQuery element representing master row.
detailRow : Object: The jQuery element representing detail row.

Fires when the grid detail row is expanded.

Example

 $("#grid").kendoGrid({
     detailExpand: function(e) {
         // handle event
     }
 });

To set after initialization

 // get a reference to the grid
 var grid = $("#grid").data("kendoGrid");
 // bind to the detailExpand event
 grid.bind("detailExpand", function(e) {
     // handle event
 }

Event data

masterRow : Object: The jQuery element representing master row.
detailRow : Object: The jQuery element representing detail row.

Fires when the grid detail is initialized.

Example

 $("#grid").kendoGrid({
     detailInit: function(e) {
         // handle event
 });

To set after initialization

 // get a reference to the grid
 var grid = $("#grid").data("kendoGrid");
 // bind to the detailInit event
 grid.bind("detailInit", function(e) {
     // handle event
 }

Event data

masterRow : Object: The jQuery element representing master row.
detailRow : Object: The jQuery element representing detail row.
detailCell : Object: The jQuery element representing detail cell.
data : Object: The data for the master row.

Fires when the grid enters edit mode.

Example

 $("#grid").kendoGrid({
     edit: function(e) {
         // handle event
 });

To set after initialization

 // get a reference to the grid
 var grid = $("#grid").data("kendoGrid");
 // bind to the edit event
 grid.bind("edit", function(e) {
     // handle event
 }

Event data

container : Object: The jQuery element to be edited.
model : Object: The model to be edited.

Fires before the grid item is removed.

Example

 $("#grid").kendoGrid({
     remove: function(e) {
         // handle event
 });

To set after initialization

 // get a reference to the grid
 var grid = $("#grid").data("kendoGrid");
 // bind to the remove event
 grid.bind("remove", function(e) {
     // handle event
 }

Event data

row : Object: The row element to be deleted.
model : Object: The model which to be deleted.

Fires before the grid item is changed.

Example

 $("#grid").kendoGrid({
     save: function(e) {
         // handle event
 });

To set after initialization

 // get a reference to the grid
 var grid = $("#grid").data("kendoGrid");
 // bind to the save event
 grid.bind("save", function(e) {
     // handle event
 }

Event data

values : Object: The values entered by the user.
container : Object: The jQuery element which is in edit mode.
model : Object: The edited model.

Fires before the grid calls DataSource sync.

Example

 $("#grid").kendoGrid({
     saveChanges: function(e) {
         // handle event
 });

To set after initialization

 // get a reference to the grid
 var grid = $("#grid").data("kendoGrid");
 // bind to the saveChanges event
 grid.bind("saveChanges", function(e) {
     // handle event
 }