kendo data sync not working

I have kendo grid auto sync true, i enter data and press save or press tab it gets saved, but i want the same functionality for arrow keys too so i tried on key press dataSource.sync but it is not working.

code:

var template_id = $('#template_id').val()
        var dataSource = new kendo.data.DataSource({
           //pageSize: 20,
          autoSync: true,
          transport:{
              read:{
                url: function() {
                  return "/job/"+ job_id + "/" + job_type_id + "/" + template_id +"/job_entries"
                },
                dataType: "json",
                cache: false
              },
              update: {
                url: function (job_type_presetting) {
                  return  "/job/"+ job_id + "/" + job_type_id + "/" + template_id + "/job_entry_update"
                },
                type: "PUT",
                dataType: "json",
                beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token',jQuery('meta[name="csrf-token"]').attr("content")); }
              },
              destroy: {
                  url: function (job_type_presetting) {
                    return  "/templates/"+ template_id +"/job_type_presettings/"+ job_type_presetting.models[0].id
                  },
                  type: "DELETE",
                  dataType: "json"
              },
              create: {
                  url: "/templates/"+ template_id +"/job_type_presettings",
                  type: "POST",
                  dataType: "json"
              },
              parameterMap: function (options, operation) {
              if (operation !== "read"  && options.models) {
                return{"job_type_presetting": options.models[0]};
              }
              else{
                return {"job_type_presetting":options};
                }
              }
          },
          batch: true,
           schema: {
               model: {
                 id: "id",
                 fields: {
                    id: { editable: false, nullable: true },
                    name: { validation: {required: true }, editable: false },
                    comment_text: {defaultValue: { id: 1, name: "comment_text"} },
                    quantity: {type: "number", format: "#", forrmat: "c0", validation: { min: 0 }},
                    part_listing: { defaultValue: { id:1 , name: "part_listing"}},
                    part_scan: {},
                 }
               }
           }
        });

        var grid = $("#grid").kendoGrid({
            dataSource: dataSource,
            navigatable: true,
            pageable: false,
            height: 550,
            columns: [
                { field:"name",title:"Items"  , width: "190px"},
                { field:"comment_text",title:"Comment", template: "#if(comment_text==null){# #: '' # #}else{# #: comment_text.code + ':' + comment_text.description # #}#", width: "240px"},
                { field:"quantity",title:"Quantity", width: "100px",min: 0 },
                { field:"part_listing",title:"Part Number" , width:"130px", editor: partsDropDownEditor, template: "#if(part_listing==null){# #: '' # #}else{# #: part_listing.part_number # #}#"},
                { field:"part_scan",title:"Part Scan",    width: "130px"}],
            editable: true,
            dataBound: function() {
              if(typeof lastEditIndex != 'undefined' && !$.isEmptyObject(lastEditIndex)) {
                 var cell = this.tbody.children().eq(lastEditIndex.row).children().eq(lastEditIndex.col);

                 this.current(cell);
                 grid.table.focus();
              }
              lastEditIndex = {};

            },
            save: function(e) {
              console.log(e)

              lastEditIndex.row = this.tbody.children().index(e.container.parent());
              lastEditIndex.col = e.container.parent().children().index(e.container);
            }

        }).data("kendoGrid");
        $("#grid").on("keydown", function (e) {
          if (e.keyCode == 38 || e.keyCode == 40  ) {
            var currentCell = grid.current();
            var nextRow = currentCell.closest('tr').next();
            var tdIndex = $(e.target).closest('td').index();
            var nextRowCell = $(nextRow).find('td:eq(' + tdIndex + ')');
            console.log(grid)
            $('#grid').data('kendoGrid').dataSource.sync();          
          }
        });

but no request is going to backend and nothing is saving.

Also after save it needs to go to the bottomcell, if up arrow pressed after save it needs to go up one cell. How can i achieve this