I was able to achieve required output following another post, but it only works for static JSON. When I replace movies variable with JSON coming from service, it gives me:
Unhandled exception at line 4, column 10920 in http://localhost/HTML.Client/JS/jquery.min.js0x800a139e - JavaScript runtime error: Syntax error, unrecognized expression: [{"value":1,"content":"Markplace","text":"Mark Central","PanelImagePath":"~/Images/MarkPlace.png"},{"value":2,"content":"Pricing","text":"Price & Mark data","PanelImagePath":"~/Images/Price.png"}]
Following works when Movies variable is set with hard coded value:
01.
<!DOCTYPE html>
03.
<
head
>
04.
<
title
></
title
>
05.
06.
<
link
href
=
"CSS/kendo.common.min.css"
rel
=
"stylesheet"
/>
07.
<
link
href
=
"CSS/kendo.default.min.css"
rel
=
"stylesheet"
/>
08.
09.
<
script
src
=
"JS/jquery.min.js"
></
script
>
10.
<
script
src
=
"JS/kendo/kendo.web.min.js"
></
script
>
11.
<
script
src
=
"JS/kendo/console.js"
></
script
>
12.
13.
</
head
>
14.
<
body
>
15.
16.
<
a
class
=
"offline-button"
href
=
"../index.html"
>Back</
a
>
17.
18.
19.
<
div
id
=
"example"
class
=
"k-content"
>
20.
<
div
class
=
"wrapper"
>
21.
<
ul
id
=
"panelbar"
>
22.
</
ul
>
23.
</
div
>
24.
</
div
>
01.
<script>
02.
$(document).ready(
function
() {
03.
04.
var
movies = [{
05.
text:
"Star Wars: A New Hope"
,
06.
content: 1977
07.
}, {
08.
text:
"Star Wars: The Empire Strikes Back"
,
09.
content: 1980,
items: [{ // Sub item collection.
text: "Sub Item 1"
},
{
text: "Sub Item 2"
}]
10.
}, {
11.
text:
"Star Wars: Return of the Jedi"
,
12.
content: 1983
13.
}
14.
];
15.
var
localDataSource =
new
kendo.data.DataSource({ data: movies });
16.
17.
localDataSource.one(
"change"
,
function
(data) {
18.
19.
//alert('Fetch');
20.
alert(JSON.stringify(data.sender._pristine));
21.
22.
var
panelItems = data.sender._pristine;
//this.view().toJSON();
23.
var
panelBar = $(
"#panelbar"
).kendoPanelBar({
24.
dataSource: panelItems,
25.
expandMode:
"single"
26.
}).data(
"kendoPanelBar"
);
27.
});
28.
29.
localDataSource.read();
30.
});
31.
</script>
32.
33.
<style scoped>
34.
.wrapper {
35.
width: 310px;
36.
height: 400px;
37.
margin: 20px auto;
38.
padding: 75px 0 0 390px;
39.
background: url(
'../../content/web/panelbar/astonmartin.png'
) no-repeat 0 50px transparent;
40.
}
41.
#panelbar {
42.
width: 300px;
43.
}
44.
#panelbar p {
45.
margin-left: 1em;
46.
margin-right: 1em;
47.
}
48.
</style>
Any help?