@progress/kendo-layout-react-wrapper/docs/panelbar/data-binding.md

Kendo UI Layout wrapper for React

---
title: Data Binding
page_title: Data Binding - PanelBar - Kendo UI Wrappers for React
description: "Bind the Kendo UI PanelBar wrapper for React to local data arrays or remote data services."
slug: databinding_panelbar
position: 2
---

# Data Binding

The PanelBar provides support for binding it to [local data arrays](#toc-binding-to-local-data-arrays) and to [remote data services](#toc-binding-to-remote-data-services).

## Binding to Local Data Arrays

The following example demonstrates how to bind the PanelBar to a local array of data.

```jsx-preview
class PanelBarContainer extends React.Component {
   constructor(props) {
     super(props);
     this.dataSource = new kendo.data.HierarchicalDataSource({
       data: props.data
     });
  }

  render() {
    return (
      <PanelBar
        dataSource={this.dataSource}/>
    );
  }
}

ReactDOM.render(
   <PanelBarContainer
        data={
          [{
              text: "Item 1",
          },{
              text: "<strong>Item 2</strong>",
              encoded: false // Allows use of HTML for item text
          },{
              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"
          }]
         } />,
    document.querySelector('my-app')
);
```

## Binding to Remote Data Services

The following example demonstrates how to bind the PanelBar to a remote data service.

```jsx
class PanelBarContainer extends React.Component {
    constructor(props) {
        super(props);
        this.dataTextField = props.dataTextField;
        this.dataSource = new kendo.data.HierarchicalDataSource({
           transport: {
                read: {
                    url: "https://demos.telerik.com/kendo-ui/service/Employees",
                    dataType: "jsonp"
                }
            },
            schema: {
                model: {
                    id: "EmployeeId",
                    hasChildren: "HasEmployees"
                }
            }
        });
    }

    render() {
        return (
            <div className="row">
                <div className="col-xs-12 col-sm-6 example-col">
                   <PanelBar dataSource={this.dataSource}
                             dataTextField={this.dataTextField}/>
                </div>
            </div>
        );
    }
}
ReactDOM.render(
    <PanelBarContainer dataTextField="FullName"/>,
    document.querySelector('my-app')
);
```

## Suggested Links

* [Kendo UI DataSource Component](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource)
* [Kendo UI PanelBar for jQuery](https://docs.telerik.com/kendo-ui/controls/navigation/panelbar/overview)
* [API Reference of the PanelBar Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/panelbar)