As an example the below code is using a kendo observable with a remote datasource model and view. I understand how to debug the ajax call to retrieve the data. But where and how do I verify that the data matches the model, then when I bind my form to my viewModel where do I debug this is for example the dropdownbox is not filling with data even though the ajax data request was a success and see the ajax response in the debugger. But can't tell where my error is??
<!DOCTYPE html><html><head> <title></title> <script src="js/lib/jquery/jquery-1.8.1.min.js"></script> <script src="js/lib/kendoui/kendo.web.min.js"></script> <link href="css/KendoUI/kendo.common.css" rel="stylesheet" /> <link href="css/KendoUI/kendo.blueopal.css" rel="stylesheet" /></head><body> <div id="example" class="k-content"> <div id="form-container"> <div class="demo-section"> Select Product: <select data-role="dropdownlist" data-option-label="Select product" data-value-field="ID" data-text-field="lastName" data-bind="source: productsSource, value: selectedProduct"></select> <button data-bind="click: save, enabled: hasChanges" class="k-button">Submit All Changes</button> </div> <div class="demo-section product-info"></div> <ul> <li><label>ID</label> <span data-bind="text:selectedProduct.ID, events: { change: change }"></span></li> <li><label>Last Name</label> <input type="text" class="k-textbox" id="lname" data-bind="value: selectedProduct.lastName, events: { change: change }" /></li> </ul> <button data-bind="click: remove" class="k-button">Delete Product</button> </div> </div> <script> var crudServiceBaseUrl = "http://127.0.0.1:8081/cors"; var viewModel = kendo.observable({ productsSource: new kendo.data.DataSource({ transport : { read: function(operation) { //alert("begin read") $.ajax({ url: crudServiceBaseUrl + "/People", dataType: "json", success: function(response) { // debugger; //alert(response) alert("success read"); //mark the operation as successful }, error: function(e){ alert("error") } }); }, }, batch: true, schema: { data : "__ENTITIES", model : { id : "ID", fields : { __KEY : { editable : false, nullable : true }, __STAMP : { editable : false, nullable : true }, ID : { editable : false, nullable : true }, firstName : { validation : { required : true } }, lastName : { validation : { required : true } } } } } }), selectedProduct: null, hasChanges: false, save: function() { this.productsSource.sync(); this.set("hasChanges", false); }, remove: function() { if (confirm("Are you sure you want to delete this product?")) { this.productsSource.remove("1"); // this.set("selectedProduct", this.productsSource.view()[0]); this.change(); } }, // showForm: function() { // return this.get("selectedProduct") !== null; // }, change: function() { this.set("hasChanges", true); } }); alert("bind") kendo.bind($("#form-container"), viewModel); </script> </body></html>