dataSource Object|Array|kendo.data.HierarchicalDataSource

The data source of the widget which is used render nodes. Can be a JavaScript object which represents a valid data source configuration, a JavaScript array or an existing kendo.data.HierarchicalDataSource instance.

If the dataSource option is set to a JavaScript object or array the widget will initialize a new kendo.data.HierarchicalDataSource instance using that value as data source configuration.

If the dataSource option is an existing kendo.data.HierarchicalDataSource instance the widget will use that instance and will not initialize a new one.

Example - set dataSource as a JavaScript object

<ul id="panelbar"></ul>
<script>
$("#panelbar").kendoPanelBar({
  dataSource: {
    data: [
      { text: "foo", items: [
        { text: "bar" }
      ] }
    ]
  }
});
</script>

Example - set dataSource as a JavaScript array

<ul id="panelbar"></ul>
<script>
  $("#panelbar").kendoPanelBar({
      dataSource: [
          {
              text: "Item 1 (link)",
              cssClass: "myClass",                            // Add custom CSS class to the item, optional, added 2012 Q3 SP1.
              url: "https://www.telerik.com/kendo-ui/"                  // link URL if navigation is needed (optional)
          },
          {
              text: "<b>Item 2</b>",
              encoded: false,                                 // Allows use of HTML for item text
              content: "text"                                 // content within an item
          },
          {
              text: "Item 3",
              // content URL to load within an item
              contentUrl: "https://demos.telerik.com/kendo-ui/content/web/panelbar/ajax/ajaxContent1.html"
          },
          {
              text: "Item 4",
              // item image URL, optional
              imageUrl: "https://demos.telerik.com/kendo-ui/content/shared/icons/sports/baseball.png",
              expanded: true,                                 // item is rendered expanded
              items: [{                                       // Sub item collection.
                  text: "Sub Item 1"
              },
              {
                  text: "Sub Item 2"
              }]
          },
          {
              text: "Item 5"
          }
      ]
  });
</script>

Example - set dataSource as an existing kendo.data.HierarchicalDataSource instance

<ul id="panelbar"></ul>
<script>
var dataSource = new kendo.data.HierarchicalDataSource({
  transport: {
    read: {
      url: "https://demos.telerik.com/kendo-ui/service/Employees",
      dataType: "jsonp"
    }
  },
  schema: {
    model: {
      id: "EmployeeId",
      hasChildren: "HasEmployees"
    }
  }
});

$("#panelbar").kendoPanelBar({
  dataSource: dataSource,
  dataTextField: "FullName"
});
</script>