Kendo UI javascript : remote bind form

Question

I'm having trouble getting started with binding a Form to a remote Datasource in Kendo UI for javascript

I have verified that the ajax call returns the correct JSONP payload, e.g:

jQuery31006691693527470279_1519697653511([{"employee_id":1,"username":"Chai"}])

Below is the code:

    <script type="text/javascript">
    $(document).ready(function() {

        var viewModel = kendo.observable({
            employeeSource: new kendo.data.DataSource({
                transport: {
                    read: {
                        url: baseUrl + "/temp1",
                        dataType: "jsonp"
                    },
                    parameterMap: function(options, operation) {
                        if (operation !== "read" && options.models) {
                            return {
                                models: kendo.stringify(options.models)
                            };
                        }
                        return options;
                    }
                },
                batch: true,
                schema: {
                    model: {
                        id: "employee_id",
                        fields:{
                            employee_id: { type: "number" },
                            username: { type: "string" }
                        }
                    }
                }
            }),
            hasChanges: false,
            save: function() {
                this.employeeSource.sync();
                this.set("hasChanges", false);
            },
            change: function() {
                this.set("hasChanges", true);
            }
        });

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

        viewModel.employeeSource.read();


    });
    </script>

<div id="item-container">

        <div class="row">
            <div class="col-xs-6 form-group">
                <label>Username</label>
                <input class="form-control k-textbox" type="text" id="username" data-bind="value: username, events: { change: change }" />
            </div>

        </div>

    <button data-bind="click: save, enabled: hasChanges" class="k-button k-primary">Submit All Changes</button>

</div>

No errors are thrown, but I was expecting my username text form field to be populated with the value 'Chai', and so on.. but it doesn't

Answer 1

Your textbox is bound to a username property but this doesn't exist on your view-model, nor is it being populated anywhere. Assuming your datasource correctly holds an employee after your call to read(), you will need to extract it and set it into your viewmodel using something like this:

change: function(e) {
    var data = this.data();
    if (data.length && data.length === 1) {
        this.set("employee", data[0]);
        this.set("hasChanges", true);
    }
}

And modify the binding(s) like this:

<input class="form-control k-textbox" type="text" id="username"
  data-bind="value: employee.username, events: { change: change }" />

You should also be aware that the change event is raised in other situations, so if you start using the datasource to make updates for example, you'll need to adapt that code to take account of the type of request. See the event documentation for more info. Hope this helps.