I've added a PanelBar to a view and have it working. However, I am unable to get this panel bar to fill all available space, without hard codin pixel values, instead of just being as large as content within.
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <script src="kendoui.mobile.2012.1.406.commercial/js/jquery.min.js" type="text/javascript"></script> <script src="kendoui.mobile.2012.1.406.commercial/js/kendo.mobile.min.js" type="text/javascript"></script> <script src="kendoui.web.2012.1.322.commercial/js/kendo.panelbar.min.js" type="text/javascript"></script> <link href="kendoui.web.2012.1.322.commercial/styles/kendo.common.min.css" rel="stylesheet" type="text/css" /> <link href="kendoui.web.2012.1.322.commercial/styles/kendo.default.min.css" rel="stylesheet" type="text/css" /> <link href="kendoui.mobile.2012.1.406.commercial/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" /></head><body> <div data-role="view" data-title="Views"> <header data-role="header"> <div data-role="navbar"> <span data-role="view-title"></span> <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a> </div> </header> <ul id="panelBar"> <li> Item 1 <ul> <li>Sub Item 1</li> <li>Sub Item 2</li> </ul> </li> <li> Item 2 <ul> <li>Sub Item 1</li> <li>Sub Item 2</li> </ul> </li></ul></div><script> var app = new kendo.mobile.Application(document.body); $(document).ready(function () { $("#panelBar").kendoPanelBar(); });</script></body></html>