MVVM with JSON data source

2 posts, 0 answers
  1. Stewart
    Stewart avatar
    1 posts
    Member since:
    Oct 2012

    Posted 07 Jun 2013 Link to this post

    Hi forum readers,

    My apologies if my question is rather basic. I am a WPF developer moving in to web development for the first time in many years and am trying to get my head around applying JSON to MVVM to a Kendo UI control.

    Background

    We are trying to retrieve JSON data from our MVC project. Put it in to the ViewModel and then get a dropdownlist to populate a list of TradeId values.

    We have gone through the demo's (e.g. remote binding)  as an FYI.

    Question:

    Of course like any other person starting off we have run in to an issue. Can anyone shed any light on what we might be doing wrong or missing? 

    At present we get an error as follows:

    Error: Unable to parse bindings.
    Message: ReferenceError: tradesSource is not defined;
    Bindings value: source: tradesSource, value: selectedTrade

    Our code is as follows:

    [code]
    <script>
        $(document).ready(function () {
            // ... some unrelated code 
            // Setup ViewModel        
            var crudServiceBaseUrl = "/trades/GetFilteredTrades/";
            
            var viewModel = kendo.observable({
                tradesSource: 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: "TradeId"
                        }
                    }
                }),
                selectedTrade: null,
                hasChanges: false,
                save: function () {
                    this.tradesSource.sync();
                    this.set("hasChanges", false);
                },
                remove: function () {
                    if (confirm("Are you sure you want to delete this Trade?")) {
                        this.tradesSource.remove(this.selectedTrade);
                        this.set("selectedTrade", this.tradesSource.view()[0]);
                        this.change();
                    }
                },
                showForm: function () {
                    return this.get("selectedTrade") !== null;
                },
                change: function () {
                    this.set("hasChanges", true);
                }
            });   
        
            console.log("View Model created");
            kendo.bind($("#form-container"), viewModel);

            console.log("View Model bound to #form-container");
        });
    </script>

    <div id="form-container">
        console.log("Combobox created");
        <h4>ComboBox</h4>
          
        <select data-role="combobox"
                data-text-field="TradeId" 
                data-value-field="TradeId" 
                data-bind="source: tradesSource, value: selectedTrade">
        </select>
    </div>

    [/code]

    Thanks in advance
  2. Daniel
    Admin
    Daniel avatar
    2231 posts

    Posted 11 Jun 2013 Link to this post

    Hello Stewart,

    The code that you provided looks correct. Could you check this jsBin example and let me know if I am missing something?

    Regards,
    Daniel
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top