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

JSON datasource on a select list via MVVM

3 Answers 252 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Aksh
Top achievements
Rank 1
Aksh asked on 02 Jan 2013, 08:25 AM
I am having trouble loading some json data from a file and showing as the options for a select list in a kendo mobile app. Can anyone spot what the issue is please?

My select item looks like this

                <li>
                    <select data-bind="value:model.product, source:products" data-text-field="name" data-value-field="name" >
</select>
Products
</li>

I have also tried datasource instead of source but had no luck.

My datasource in my view model is setup as follows:

self.products = new kendo.data.DataSource({
transport: { 
read: { 
url: "scripts/products.json", 
dataType: "json" 

            
}
});

My json file looks like this:

{ "name": "Product 1",  "owner": "Test" },
{ "name": "Product 2", "owner": "Test" }
]

When I run my app the select list is empty.

If I change my self.products to be inline json like below then it works ok. However, I would like to load this from a file.

self.products = [ 
{ name: "Product 1", owner: "Test" },
{ name: "Product 2", owner: "Test" }
];

Thanks

3 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 02 Jan 2013, 01:31 PM
Hello,

It is unclear how the Json data is read and set in the View-Model.
I tried a similar scenario and got everything to work as expected. Please compare your current implementation with this example.

Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Aksh
Top achievements
Rank 1
answered on 03 Jan 2013, 08:16 PM
See following jsFiddle for what I am trying to do using a data-source. I have managed to get something working when I use a dropdownlist datarole but can't get it to work without it?

Thanks
0
Alexander Valchev
Telerik team
answered on 07 Jan 2013, 01:59 PM
Hello,

Thank you for the provided example.

If I understood correctly you would like to source bind a <select> element (not Kendo DropDownList) to a remote data. In that case I recommend the following approach:
  • bind the <select> element to array (initially the array is empty)
  • retrieve the data via Ajax request (loading from external json file)
  • at the success event of the request, set the data in the View-Model

For convenience I am providing a code snippet and jsFiddle demo:
var viewModel = kendo.observable({
  products: []
});
 
function onInit() {
  $.ajax({
      url: "/echo/json/",
      dataType: "json",
      success: function(response) {
        viewModel.set("products", response);
      }
  });
}


Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
General Discussions
Asked by
Aksh
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Aksh
Top achievements
Rank 1
Share this question
or