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/kendo-ui/service/Employees",
                    dataType: "jsonp"
                }
            },
            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.