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?