Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

PanelBar and JSON

3 Answers 170 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Hafiz
Top achievements
Rank 1
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

Sort by
0
Hafiz
Top achievements
Rank 1
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>
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?
0
Hafiz
Top achievements
Rank 1
answered on 19 Nov 2013, 07:35 AM
No one even from Telerik support team? Any other place to get rapid response?
0
Alexander Valchev
Telerik team
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!
Tags
PanelBar
Asked by
Hafiz
Top achievements
Rank 1
Answers by
Hafiz
Top achievements
Rank 1
Alexander Valchev
Telerik team
Share this question
or