dataBound

Triggered after the dataSource change event has been processed (adding/removing items);

Event Data

e.node jQuery

The node whose children have been changed. If the changes have occurred on the root level, this parameter is undefined.

Example - subscribe to the "dataBound" event during initialization

<div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
  dataSource: [
    { text: "foo", items: [
      { text: "bar" }
    ] }
  ],
  dataBound: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log("DataBound", e.node);
  }
});
</script>

Example - subscribe to the "dataBound" event after initialization

<div id="treeview"></div>
<script>
function tree_dataBound(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log("DataBound", e.node);
}
$("#treeview").kendoTreeView({
  dataSource: [
    { text: "foo", items: [
      { text: "bar" }
    ] }
  ]
});
var treeview = $("#treeview").data("kendoTreeView");
treeview.bind("dataBound", tree_dataBound);

treeview.setDataSource(new kendo.data.HierarchicalDataSource({
  data: [
    { text: "bar", items: [
      { text: "baz" }
    ] }
  ]
}));
</script>

Example - show an empty message when no items have been loaded from the server

<div id="treeview"></div>
<script>
  $("#treeview").kendoTreeView({
    dataSource: [],
    dataBound: function(e) {
      if (!this.dataSource.data().length) {
        this.element.append("<p class='no-items'>No items yet.</p>");
      } else {
        this.element.find(".no-items").remove();
      }
    }
  });
</script>