or
I've used the theme designer to do what I want but this affects all controls, not just the panelbar...

$(document).ready(function(){
$("#grid").kendoGrid({
columns:[
{
field: "FirstName",
title: "First Name"
},
{
field: "LastName",
title: "Last Name"
}],
dataSource: {
data: [
{
FirstName: "Joe",
LastName: "Smith"
},
{
FirstName: "Jane",
LastName: "Smith"
}]
}
});
});
$("#grid").kendoGrid({
data: people
});
dataSource: { data: [ @foreach (var report in Model.Reports) { <text>{Id: @report.Id, ReportId: "@report.ReportId", ReportSample: "@report.ReportSample", ReportLegend: "@report.ReportLegend", ReportFaq: "@report.ReportFaq", ReportName: "@report.ReportName"}, </text> } ], schema: { model: { id: "Id", fields: { Id: { type: "number" }, ReportId: { type: "string" }, ReportSample: { type: "string" }, ReportLegend: { type: "string" }, ReportFaq: { type: "string" }, ReportName: { type: "string" } } } }}<div id="myTabs"> <ul> <li class="k-state-active">Tab 1</li> <li>Tab 2</li> <li>Tab 3</li> </ul> <div id="tab1">tab 1 content</div> <div id="tab2">tab 2 content</div> <div id="tab3"><input type="button" onclick="selectMyTab();" value="button" /></div></div><script type="text/javascript"> $().ready(function () { $("#myTabs").kendoTabStrip({ animation: { open: { effects: ""} } }); }); function selectMyTab() { $("#myTabs").kendoTabStrip().select("#tab1"); }</script>