Data Binding
The PanelBar provides options for binding it to local data arrays and remote data services.
For more information on binding the PanelBar to different service end-points, refer to the article about HierarchicalDataSource.
Binding to Local Data
This approach is available as of the Kendo UI R1 2017 release.
The following example demonstrates how to create a PanelBar and bind it to a local data source.
<div id="panelBar"></div>
<script>
$(document).ready(function() {
$("#panelBar").kendoPanelBar({
dataSource: [
{
text: "Item 1",
expanded: true,
items: [
{ text: "Item 1.1" },
{ text: "Item 1.2" }
]
},
{ text: "Item 2" }
]
})
});
</script>Binding to Remote Data
This approach is available as of the Kendo UI R1 2017 release.
The following example demonstrates how to create a PanelBar and bind it to a remote HierarchicalDataSource.
<div id="panelBar"></div>
<script>
$(document).ready(function() {
$("#panelBar").kendoPanelBar({
dataTextField: "FullName",
dataSource: {
transport: {
read: {
url: "https://demos.telerik.com/service/v2/core/Employees"
}
},
schema: {
model: {
id: "EmployeeId",
hasChildren: "HasEmployees"
}
}
}
})
});
</script>Retry of Data Binding
As of the Kendo UI R1 2017 release, the PanelBar provides a built-in functionality of attempting a retry. If the initial data binding fails and regardless of the reason for the failure, you are now prompted with a Request failed. message. To initiate a new data binding, use the Retry button.
