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
>