Binding to local json file

5 posts, 0 answers
  1. Brett
    Brett avatar
    23 posts
    Member since:
    Feb 2006

    Posted 10 Feb 2012 Link to this post

    I cannot get my json data to display in a List. Using firebug I can see that my json file is being called but my page is printing out each character as a seperate list item ie. not recognising the json object/schema.

    SCRIPT
            $(document).ready(function () {
                var ds = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "data/team.json"
                        },
                        dataType: "json"
                    }
                });
                $("#listview").kendoMobileListView({
                    dataSource: ds
                });
            });
    
    JSON
    
    [
    { name: "Bob", title: "Mr" },
    { name: "Fred", title: "Sir" }
    ]
    Any help would be appreciated. Files attached.
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 10 Feb 2012 Link to this post

    Hello,

    There are several problems with the code provided. 

    1. The dataType option of the datasource needs to be set to the read config of the transport. 
    2. The json provided is not valid. The keys need to be quoted too. 
    3. Last of all, the listview will need a template set to work with the data. 

    Find attached the modified project.


    Greetings,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Brett
    Brett avatar
    23 posts
    Member since:
    Feb 2006

    Posted 10 Feb 2012 Link to this post

    Thank you for the quick reply. It is working now. 

    I did try using templates as per the documentation. I used template: "${data:name}". I can't find the documentation for the format you used in the example - template: "#:name#"

    I'm assuming this is due to changes while the product is still in beta. (or maybe I'm just useless at reading docs)
  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 10 Feb 2012 Link to this post

    Hi,

    It is not your fault. We are in the process of obsoleting the ${} syntax in favor of #:# syntax. They work in the exactly same way, the second one being more consistent with the # # and #= # syntax. 

    The expressions inside the templates are actually javascript. So in your case ${data.name} would have worked.


    Kind regards,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Ganesan
    Ganesan avatar
    1 posts
    Member since:
    Jun 2015

    Posted 21 Jun 2015 Link to this post

    Hi,

     I need to update the list view data source based on tree view node click.I got the datasource as json using ajax call but can't able to set to list view.Can you able to help me on this to set the datasource.

    function onSelect(e) {
            var id = e.sender.dataItem(e.node).get("id");

            $.ajax({
                type: "POST",
                url: '@Url.Action("getValuesonNodeClick", "Home")',
                data: { node: id }, // the data in JSON format.  Note it is *not* a JSON object, is is a literal string in JSON format
                success: OnGetSelectNodeSuccess,
                error: OnGetMemberError
            });

        }

     function OnGetSelectNodeSuccess(datasource1, status) {
     var dataSource = new kendo.data.DataSource({data: datasource1});
       $("#listview").kendoListView({
                dataSource: dataSource,
                template: "#:template#"
            });
    }
Back to Top
Kendo UI is VS 2017 Ready