This is a migrated thread and some comments may be shown as answers.

PanelBar and JSON

3 Answers 219 Views

PanelBar

This is a migrated thread and some comments may be shown as answers.

Hafiz asked on 10 Nov 2013, 07:56 AM

Hi,

I am working with KendoUI Web widgets PanelBar:

<div id="example" class="k-content">
<div class="wrapper">
<ul id="panelbar">
</ul>
</div>
</div>

I want to achieve this:

$(document).ready(function () {

var jsonStr = "[{text: " + "Item 1" + ",cssClass: " + "myClass" + ", url: " + "http://www.kendoui.com/" + "}]";
$("#panelbar").kendoPanelBar({
dataSource: jsonStr
});
});

but I am getting following error:
Error: Syntax error, unrecognized expression: [{text: Item 1,cssClass: myClass, url: http://www.kendoui.com/}]

I am using 2013.2.918.trial version.

Any help?

3 Answers, 1 is accepted

answered on 10 Nov 2013, 12:20 PM

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>

02.<html xmlns="http://www.w3.org/1999/xhtml">

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>

1.</body>

2.</html>

Any help?

answered on 20 Nov 2013, 04:36 PM

Hi Hafiz,

Your scenario seems to work as expected on my side with remote data retrieved by a jQuery.ajax request.

<ul id="panelbar"></ul>

<script>

$(document).ready(function () {

$.ajax({

url: "data.json",

dataType: "json",

success: function(response) {

$("#panelbar").kendoPanelBar({

dataSource: response,

expandMode: "single"

});

}

});

</script>

Where data.json file contains the following data:

[

{

"value": 1,

"content": "Markplace",

"text": "Mark Central",

"PanelImagePath": "~/Images/MarkPlace.png"

},

{

"value": 2,

"content": "Pricing",

"text": "Price & Mark data",

"PanelImagePath": "~/Images/Price.png"

}

]

On a side note, as a trial user you are entitled with a 48hours response time. If you would like to receive faster responses please purchase a commercial license. For more information regarding the available support plans check this page.

Regards,
Alexander Valchev
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!