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

Binding to local json file

4 Answers 527 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Brett
Top achievements
Rank 2
Brett asked on 10 Feb 2012, 08:32 AM
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.

4 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 10 Feb 2012, 10:57 AM
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!
0
Brett
Top achievements
Rank 2
answered on 10 Feb 2012, 12:35 PM
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)
0
Petyo
Telerik team
answered on 10 Feb 2012, 04:29 PM
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!
0
Ganesan
Top achievements
Rank 1
answered on 21 Jun 2015, 07:01 PM

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#"
        });
}
Tags
ListView (Mobile)
Asked by
Brett
Top achievements
Rank 2
Answers by
Petyo
Telerik team
Brett
Top achievements
Rank 2
Ganesan
Top achievements
Rank 1
Share this question
or