Bind images dynamically to a div using MVVM format

5 posts, 1 answers
  1. Hardik
    Hardik avatar
    11 posts
    Member since:
    Jun 2012

    Posted 11 Apr 2013 Link to this post

    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
  2. Holger
    Holger avatar
    77 posts
    Member since:
    Nov 2012

    Posted 11 Apr 2013 Link to this post

    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
  3. Kendo UI is VS 2017 Ready
  4. Hardik
    Hardik avatar
    11 posts
    Member since:
    Jun 2012

    Posted 11 Apr 2013 Link to this post

    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



  5. Answer
    Holger
    Holger avatar
    77 posts
    Member since:
    Nov 2012

    Posted 11 Apr 2013 Link to this post

    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
  6. Hardik
    Hardik avatar
    11 posts
    Member since:
    Jun 2012

    Posted 11 Apr 2013 Link to this post

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

    Thanks again!!
    -Hardik
Back to Top
Kendo UI is VS 2017 Ready