Book Image

Kendo UI Cookbook

By : Sagar Ganatra
Book Image

Kendo UI Cookbook

By: Sagar Ganatra

Overview of this book

Table of Contents (18 chapters)
Kendo UI Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

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",
 ...