O'Reilly logo

Kendo UI Cookbook by Sagar Ganatra

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating a PanelBar

A PanelBar can be created either by specifying its structure in the HTML markup or by configuring it using an API. In this recipe, we will take a look at the former approach.

How to do it…

A PanelBar widget contains a list of items stacked vertically. To create a PanelBar, we will need a list of items and hence we use the HTML's ordered or unordered list. In this example, we will list travel destinations, airlines, and important sights to visit as three panels:

<ul id="panelBar" style="width: 400px">
    <li>
     Destinations
 </li>
    <li>
        Flights
    </li>
    <li>
        Important Sights
    </li>
</ul>

Here, the list contains three items and these are the headings for each panel that we want to have. Also, the width property is set to 400px which will set ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required