Bind images dynamically to a div using MVVM format

[Hardik]

I am new to kendo ui and mvvm, and I'm facing this issue:

I'm having a JSON file in the follow format:

    [
    {
    "Id":1,
    "img":"shoes.png"},
    {"Id":2,
    "img":"books.png"}
        }
    ]
I am reading the file using the sample mentioned online by you'll as follows:

    var crudServiceBaseUrl = "pro.json";
        var viewModel = kendo.observable({
                productsSource: new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: crudServiceBaseUrl,
                            dataType: "json"
                        },
                        update: {
                            url: crudServiceBaseUrl,
                            dataType: "json"
                        },
                        destroy: {
                            url: crudServiceBaseUrl,
                            dataType: "json"
                        },
                        parameterMap: function(options, operation) {
                            if (operation !== "read" && options.models) {
                                return {
                                    models: kendo.stringify(options.models)
                                };
                            }
                            return options;
                        }
                    },
                    batch: true,
                    schema: {
                        model: {
                            id: "Id"
                        }
                    }
                })
            });

            kendo.bind($("#form-container"), viewModel);

I am able to bind the data from the data source to a Kendo Control such as a dropdownlist or some other Kendo Control. But when I try binding the data to an HTML Control (mostly an img tag). It stops working and gives an error saying "this.parent" is not a function.

following is the HTML which works:

    Select Product: <select data-role="dropdownlist" data-value-field="Id" data-text-field="img"
                             data-bind="source: productsSource"></select>

However binding to a normal `<img>` tag does not work. In short I need to bind images based on src value to a div using kendo ui mvvm.

Kindly help me out. Thanks!!

-
Hardik

[Holger]

You will have to use a template for the list items.

Please check the following demo to see how this works: http://demos.kendoui.com/web/dropdownlist/template.html

[Hardik]

Hi Holger,

Thanks for the feedback..However, that is not what I'm looking for. The template is used inside the Kendo dropdownlist and wired up to the datasource.

My requirement is that, I'm having an empty div, which I need to populate with images by reading a JSON file using Kendo UI MVVM.

However, after researching, I was able to do that. But, my code is not as per MVVM standard. If you could help me convert my code to MVVM format it would be very helpful.

Follow is the JSBin path
 http://jsbin.com/ovupam/5/edit

[Holger]

Hi Hardik,

I understand now. You are looking for something like the KO foreach binding or the Angular ng-repeat directive in Kendo MVVM. AFAIK Kendo does currently not support something like this.

Regards,
Holger

[Hardik]

Thanks alot Holger for helping me out!!  I got a similar response on StackOverflow.
I shall keep it in mind.

Thanks again!!
-Hardik