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
      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
    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>
In this article
Not finding the help you need? Improve this article