JSON datasource on a select list via MVVM

[Aksh]

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

[Alexander Valchev]

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

[Aksh]

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

[Alexander Valchev]

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