PanelBar and JSON

4 posts, 0 answers
  1. Hafiz
    Hafiz avatar
    4 posts
    Member since:
    Nov 2013

    Posted 10 Nov 2013 Link to this post

    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?
  2. Hafiz
    Hafiz avatar
    4 posts
    Member since:
    Nov 2013

    Posted 10 Nov 2013 Link to this post



    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?
  3. Kendo UI is VS 2017 Ready
  4. Hafiz
    Hafiz avatar
    4 posts
    Member since:
    Nov 2013

    Posted 19 Nov 2013 Link to this post

    No one even from Telerik support team? Any other place to get rapid response?
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 20 Nov 2013 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready