Kendo Observable remote datasource update is not being called

Question

I have a HTML bounded form where I load the data from the Kendo Observable datasource read button but if the user updates the form, then clicks the update button, the ViewModel is updated but the datasource never gets updated to send the new data back to the server.

I was using the model, datasource object, and observable similar to this post: Kendo MVVM create new record with remote datasource

Any ideas on how to get the datasource transport:update to be called to sync to the remote server?

My update is being done with the vsaveupdt button click within the observable as seen below

Form Model

 var formModel = kendo.data.Model.define({                            
                            id: "investigation_id",
                            fields: {     
                                investigation_id: { hidden: true, type: 'number' },                                 
                                sr_number: { type: 'number', editable: true, defaultValue: null, validation: { required: { message: "SR Number cannot be empty" } } },                                
                                ticket_number: {  type: 'string', validation: { required: false} },
                                updt_datetime: { type: 'date', validation: { required: false} },
                                script_name: { type: 'string', editable: true, validation: { required: { message: "SR Number cannot be empty" } } },
                                script_name_chg_ind: { type: 'number', validation: { required: false} },
                                standard_ind: { type: 'number', editable: true, validation: { required: false} },
                                change_type: { type: 'number', editable: true, validation: { required: { message: "Change Type needs selection" } } },
                                change_type_details: { type: 'string', editable: true, validation: { required: false} },
                                resolution_type: { type: 'number', editable: true, validation: { required: false} },
                                resolution_type_details: { type: 'string', editable: true, validation: { required: false} },
                                resolution_subtype: { type: 'number', editable: true, validation: { required: false} },
                                description: { type: 'string', editable: true, validation: { required: { message: "Description cannot be empty" } } },
                                tech_details: { type: 'string', editable: true, validation: { required: { message: "Technical Details cannot be empty" } } },
                                inv_details: { type: 'string', editable: true,validation: { required: { message: "Investigation Details cannot be empty" } } },
                                possible_change: { type: 'string', editable: true, validation: { required: false} },
                                filename: { type: 'string', validation: { required: { message: "Filename cannot be empty" } } },
                                filepath: { type: 'string', validation: { required: { message: "Filepath cannot be empty" } } },
                                test_files: { type: 'string', validation: { required: false} },
                                work_effort: { type: 'string', editable: true, validation: { required: false} }                                
                            }
                        });

Remote DataSource

var formSource = new kendo.data.DataSource({                                                                
       transport: {
               read: function(){
                    const sr_number = $('#sr_number');
                    $.ajax({
                          url: "triage_inv/form",
                          dataType: "json",
                          type: 'GET',
                          data: { srNumber : sr_number.val() },                                            
                          complete: function(response) {                                                                                                
                              var res = response.responseJSON;
                              console.log('read reply',res);  
                              console.log('datasource length =',res.length);                                                                                         
                              ...
                           }
                    });   
               },
               create: function(options){
                   $.ajax({
                      url: "triage_inv/form/create",
                      dataType: "json",                                              
                      data: { models: kendo.stringify(options.data.models) },
                      complete: function() {                                                
                          toastr.info('success', 'INV Doc created!');
                          $('button#save').text('Update');                                                                                               
                      }
                   });                                                                                
              },                                    
              update: function(options){                                        
                    const sr_number = $('#sr_number');
                    $.ajax({                                        
                          url: "triage_inv/form/update",
                          dataType: "json",   
 data:{srNumber :sr_number.val(),models:kendo.stringify(options.data.models)               
                          },                                                                                        
                          complete: function() {
                                  toastr.info('success', 'INV Doc updated!');
                                  $('button#save').text('Update');
                          }
                    });
               },
               sort: { field: "open_dt_tm", dir: "asc"}                                    
           },                                                                                                                                                                               
           batch: true,
           schema: {
                     model: formModel                     
           },                                                                                       
           pageSize: 20,
           page: 1,                                                                                                                   
});                  

Observable

var form = kendo.observable({                                                         
      forms: new formModel(),
      standard_ind: 0, change_type: 0,
      resolution_type: 0,resolution_subtype: 0,                              
     getstd: function(){ return this.get("forms.standard_ind"); }, 
     getchg: function(){ return this.get("forms.change_type"); },                                                        
     getrestype: function(){ return this.get("forms.resolution_type"); },
     getresstype: function(){ return this.get("forms.resolution_subtype"); },                              
     vsaveupdt: function(e){                                   
              remoteDataSource.fetch(function(){
                  var data = this.data();
                  console.log('grid data > ',data);
                  const sr_number = $('#sr_number').val();
                 if(sr_number == form.sr_number){
                       $('#tckt_no').text(data.ticket_number);                           
                 }                                    
              });                                
              var njson = this.forms;
              console.log("object->",njson);                                  
              var btntext = $('button#save').text();
              console.log(btntext);
              var std = this.getstd();                                           
              var chg = this.getchg();   
              console.log('save/update chg >',chg) ;                               
              var restype = this.getrestype();
              var resstype = this.getresstype();                                
              var ticketnum = $('#tckt_no').text();                                
              njson.set("standard_ind",std);
              njson.set("change_type",chg);
              njson.set("resolution_type",restype);
              njson.set("resolution_subtype",resstype);
              njson.set("ticket_number",ticketnum);                                  
              if( btntext == 'Update'){
                 console.log('data change ',njson);  
                 form.set("forms",njson);
                 formSource.sync();                 
              }else{     
                 console.log('Save change ',njson);
                 formSource.add(njson);                               
                 formSource.sync();                                    
              }
     },...  

Answer 1

You will need to get the observable from the datasource using the Get method: https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/get

Set the values of the observable are set using the Set method: https://docs.telerik.com/kendo-ui/api/javascript/data/model/methods/set

Once the values are set, call the Sync method: https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/sync

Here is an example using Kendo's Form widget

var dataSource = new kendo.data.DataSource({
  transport: {
    read: function(options) {
      // this is just for demo, you'd have your actuall transport setup
      options.success([
        { Id: 1, FirstName: "Jane", LastName: "Doe", age: 30 },
        { Id: 2, FirstName: "John", LastName: "Doe", age: 33 }
      ]);
    },
    update: function(options) {
      console.log(options);
    }
  },
  schema: {
    model: { id: "Id" }
  }
});
$(document).ready(function () {
  $("#edit-form").kendoForm({
    orientation: "vertical",
    formData: {},
    items: [{
      type: "group",
      label: "Edit Form",
      items: [
        { field: "FirstName", label: "First Name", validation: { required: true } },
        { field: "LastName", label: "Last Name", validation: { required: true } },
        { field: "Age", label: { text: "Age", optional: true }, editor: "NumericTextBox", editorOptions: { format: "N0"} }
      ]
    }],
    submit: function(e) {
      e.preventDefault();

      var viewmodel = dataSource.get(1);
      viewmodel.set("FirstName", e.model.FirstName);
      viewmodel.set("LastName", e.model.LastName);
      viewmodel.set("Age", e.model.Age);
      dataSource.sync();
    }
  });

  var form = $("#edit-form").getKendoForm();
  dataSource.fetch(function() {
    var viewmodel = dataSource.get(1);

    form.setOptions({ formData: viewmodel });
  });
});

<link href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.material-v2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="edit-form"></form>

<script src="https://kendo.cdn.telerik.com/2020.3.1118/js/kendo.all.min.js"></script>

Dojo: Live Demo

Update

Per the OP's request, here is how it would be done without the kendo-ui form:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.material-v2.min.css">
  <body>
    <form id="edit-form">
      <input type="text" class="k-textbox" placeholder="First Name" data-bind="value: FirstName" />
      <input type="text" class="k-textbox" placeholder="Last Name" data-bind="value: LastName" />
      <input type="number" class="k-textbox" placeholder="Age"
             data-role="numerictextbox"
             data-format="N0"
             data-min="0"
             data-bind="value: Age">
      <button type="submit">Submit</button>
    </form>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.3.1118/js/kendo.all.min.js"></script>
    <script>
      var dataSource = new kendo.data.DataSource({
        transport: {
          read: function(options) {
            // this is just for demo, you'd have your actuall transport setup
            options.success([
              { Id: 1, FirstName: "Jane", LastName: "Doe", Age: 30 },
              { Id: 2, FirstName: "John", LastName: "Doe", Age: 33 }
            ]);
          },
          update: function(options) {
            console.log(options);
          }
        },
        schema: {
          model: { id: "Id" }
        }
      });
      $(document).ready(function () {
        var form = $("#edit-form");
        dataSource.fetch(function() {
          var viewmodel = dataSource.get(1);
                    kendo.bind(form, viewmodel);
        });

        $("#edit-form").on("submit", function(e) {
          e.preventDefault();
          dataSource.sync();
        });
      });
    </script>
  </body>
</html>

Answer 2

the datasource insert... method looks to have worked along with the sync method to send data to remote service as it is calling the transport update now. See updated context below

$(document).ready(function () {
...
$("#triage_form").on("submit", function(e){                                                                                    
                  var uson = form.forms;
                  uson.set('id',1);
                  console.log('data change ',form.forms);                                                                  
                  formSource.insert(0,uson);                            
                  e.preventDefault();
                  formSource.sync();
 });
...