Binding the PanelBar to a DataSource object

A PanelBar can also be constructed by specifying the content in a DataSource object. The DataSource can be local, or may refer to a remote service that returns a JSON structure. In addition to specifying the data that needs to be displayed in the PanelBar, the DataSource object can be used to specify some of the configuration options as well. In this recipe, we will see how a PanelBar can be built using a DataSource object.

How to do it…

When initializing the PanelBar using the kendoPanelBar function, specify the dataSource option:

$("#panelBar").kendoPanelBar({
  dataSource: [
    {
      text: "Destinations",
      expanded: true,
      items: [
        {
          text: "India",
          imageUrl: "./images/India-Flag-icon.png",
          cssClass: "destinationData"
        }, {
          text: "Australia",
          imageUrl: "./images/Australia-Flag-icon.png",
          cssClass: "destinationData"
        }, {
          text: "Indonesia",
 ...