change

Fires when the user selects a table row or cell in the TreeList. The event handler function context (available through the this keyword) will be set to the widget instance.

Event Data

e.sender kendo.ui.TreeList

The widget instance which fired the event.

Example - getting the selected data items when using row selection

<div id="treeList"></div>
<script>
  $("#treeList").kendoTreeList({
    columns: [
      { field: "id" },
      { field: "name" },
      { field: "age" }
    ],
    dataSource: [
      { id: 1, parentId: null, name: "Jane Doe", age: 22, expanded: true },
      { id: 2, parentId: 1, name: "John Doe", age: 24 },
      { id: 3, parentId: 1, name: "Jenny Doe", age: 3 }
    ],
    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(selectedDataItems.length);
    }
  });
</script>

Example - getting the selected data items when using cell selection

<div id="treeList"></div>
<script>
  function 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
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log(selectedDataItems.length + " data items selected.");
  }
  $("#treeList").kendoTreeList({
    columns: [
      { field: "id" },
      { field: "name" },
      { field: "age" }
    ],
    dataSource: [
      { id: 1, parentId: null, name: "Jane Doe", age: 22, expanded: true },
      { id: 2, parentId: 1, name: "John Doe", age: 24 },
      { id: 3, parentId: 1, name: "Jenny Doe", age: 3 }
    ],
    selectable: "multiple, cell"
  });
  var treeList = $("#treeList").data("kendoTreeList");
  treeList.bind("change", change);
</script>