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

<ul id="panelbar"></ul>
<script>
$("#panelbar").kendoPanelBar({
  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

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

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

<ul id="panelbar"></ul>
<script>
  $("#panelbar").kendoPanelBar({
    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>