Auto Save and Move Down One Cell

2 posts, 0 answers
  1. James
    James avatar
    5 posts
    Member since:
    Apr 2011

    Posted 21 Jan 2015 Link to this post

    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;
    }
    }












  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1444 posts

    Posted 23 Jan 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top