change

Fired when the user selects or deselects a table row or cell in the grid. To retrieve the selected elements, use the select method.

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

The event will be fired only when the Grid is selectable.

Event Data

e.sender kendo.ui.Grid

The widget instance which fired the event.

e.cellAggregates

The calculated cell aggregates. Available if selectable.cellAggregates is enabled.

Example - get the selected data item(s) when using row selection

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    dataSource: {
        data: [
            { id: 1, name: "Jane Doe", age: 30 },
            { id: 2, name: "John Doe", age: 33 }
        ],
        schema: {
            model: {
                id: "id"
            }
        }
    },
    selectable: "multiple, row",
    change: function(e) {
      var selectedRows = this.select();
      var selectedDataItems = [];
      for (var i = 0; i < selectedRows.length; i++) {
        var dataItem = this.dataItem(selectedRows[i]);
        selectedDataItems.push(dataItem);
      }

      // selectedDataItems contains all selected data items
/* The result can be observed in the DevTools(F12) console of the browser. */
      console.log("Selected data items' name: " + selectedDataItems.map(e => e.name).join(", "));
    }
  });
</script>

Example - get the selected data item(s) when using cell selection

<div id="grid"></div>
<script>
function grid_change(e) {
  var selectedCells = this.select();
  var selectedDataItems = [];
  for (var i = 0; i < selectedCells.length; i++) {
    var dataItem = this.dataItem(selectedCells[i].parentNode);
    if ($.inArray(dataItem, selectedDataItems) < 0) {
      selectedDataItems.push(dataItem);
    }
  }
  // selectedDataItems contains all selected data items
}
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  selectable: "multiple, cell"
});
var grid = $("#grid").data("kendoGrid");
grid.bind("change", grid_change);
</script>

Example - disable the selected rows

<div id="grid"></div>
<script>
  $("#grid").kendoGrid({
    columns: [
      {selectable: true},
      { field: "name" },
      { field: "age" }
    ],
    dataSource: [
      { name: "Jane Doe", age: 30 },
      { name: "James Doe", age: 34 },
      { name: "John Doe", age: 37 },
      { name: "Mark Doe", age: 23 },
      { name: "Mike Doe", age: 63 }
    ],
    change: function(e) {
      var grid = e.sender;
      var selectedRows = this.select();
      $("td").removeClass("k-disabled");

      selectedRows.each(function(i, x) {
        $(x).find("td:not(:first)").addClass("k-disabled");
      });
    }
  });
</script>