New to Kendo UI for jQuery? Start a free 30-day trial

DataBound

events

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

dataBound

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.

<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>

<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>

<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>

DataBound

dataBound

Event Data

e.node jQuery

e.node `jQuery`