Auto Save and Move Down One Cell

[James]

When the user presses the Enter Key, I want to Save the changes and Move Down one cell unless I'm already on the last cell, then just stay there.  I have the Save part working, but every time it saves the focus jumps to the upper left cell of the grid. 


@(Html.Kendo().Grid<TransactionDetailEditable>()
              .Name("Grid")
              .Columns(columns =>
              {
                  columns.Bound(p => p.Id).Hidden(true).Width(5);
                  columns.Bound(c => c.Sequence).Width(25).Title("Seq").Hidden();
                  columns.Bound(c => c.Account).Width(60).Title("Account");
                  columns.Bound(c => c.PropertyDataCollectorName)
                         .Width(180)
                         .Title("Data Entry Description")
                         .ClientFooterTemplate("<div style='text-align:right'>Total:</div>")
                         .HtmlAttributes(new
                         {
                             style = "text-align:right;"
                         });
                  columns.Bound(c => c.TransactionHeaderId).Width(100).Title("Header Id").Hidden();
                  columns.Bound(c => c.PropertyDataCollectorId).Width(50).Title("PDC Id").Hidden();
                  columns.Bound(c => c.Amount)
                         .Width(95)
                         .Title("Amount")
                         .Format("{0:n}")
                         .HtmlAttributes(new { style = "text-align:right;" })
                         .ClientFooterTemplate("<div style='text-align:right'>#= kendo.toString(sum, 'n2') #</div>");
                  columns.Bound(c => c.Notes)
                         .Width(150)
                         .Title("Notes");
                  columns.Bound(c => c.IsEditable).Hidden();
              })
              .Editable(editable => editable.Mode(Kendo.Mvc.UI.GridEditMode.InCell))
              .Pageable(p => { p.Refresh(true); p.PageSizes(true); })
              .Navigatable()
              .Scrollable()
              .Events(e =>
              {
                  e.Save("onGridSave");
                  // e.DataBound("onDataBound");
                  e.Edit("edit");
              })
              .DataSource(d => d
                                .Ajax()
                                .Aggregates(a =>
                                {
                                    a.Add(p => p.Amount).Sum();
                                })
                                .Batch(true)
                                .PageSize(20)
                                .ServerOperation(false)
                                .Events(e => e.Error("errorHandler"))
                                .Model(model =>
                                {
                                    model.Id(p => p.Id);
                                    model.Field(p => p.Id).Editable(false);
                                    model.Field(p => p.Account).Editable(false);
                                    model.Field(p => p.PropertyDataCollectorName).Editable(false);
                                    model.Field(p => p.Amount).Editable(@ViewBag.Editable);
                                    model.Field(p => p.Notes).Editable(@ViewBag.Editable);
                                })
                                .Read(read => read.Action("Read", "TransactionDetail"))
                                .Update(update => update.Action("Update", "TransactionDetail"))
                                .Create(create => create.Action("Create", "TransactionDetail"))
                                .Destroy(destroy => destroy.Action("Destroy", "TransactionDetail")))
 )        
function onGridSave(e) {
    setTimeout(function (e) {
         var grid = $("#Grid").data("kendoGrid");
         grid.dataSource.sync();
   
         MoveDownOneCell(); 
    });
}

function MoveDownOneCell(){
if (!LastCellInColumn){
MoveDownSomehow;
}
}

[Alexander Popov]

Hello James,

Although not supported out of the box, this could be achieved using a custom solution. For example: 

function onGridSave(e){
  var grid = this;
  var row = e.container.closest("tr");
  setTimeout(function() {
    if(row.next().length)
    grid.editCell(row.next().find("td:first"));
  })
}

Regards,
Alexander Popov
Telerik