dataSourceObject|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/service/v2/core/Employees" } }, schema: { model: { id: "EmployeeId", hasChildren: "HasEmployees" } } }); $("#panelbar").kendoPanelBar({ dataSource: dataSource, dataTextField: "FullName" }); </script>In this article