InCell Editing - Saving when stepping out of cell

[IT]

Hi! I'm using the KendoUI Grid with MVC 4.  I'm trying to figure out how to automagically save the cell data when I step out of the cell.  I can get it to save using a "Save" button and batch editing, but my requirements are such that they don't want to have to press the "Save" button.

Thanks for your help in advance.

[Petur Subev]

Hi Stephanie,

This could be easily achieved via the Save event of the Grid and the dataSource sync objec i.e. .Events(ev=>ev.Save("function(e){this.dataSource.sync()}"))

Kind Regards,
Petur Subev
the Telerik team

[IT]

OK, the sync is happening before the grid registers that the field has changed.  The original data is passed back to the server, not the updated data. When I try to update the same cell again, it passes the first edit through to the controller.

What am I missing?

.cshtml:
@(Html.Kendo().Grid<TestKendoGrid.Models.myTransaction>()

  .Name("Grid")

  .Editable(editable => editable.Mode(GridEditMode.InCell))

  .Columns(columns =>

      {

         columns.Bound(o => o.TranDt).Width(150);

         columns.Bound(o => o.Description).Width(300);

         columns.Bound(o => o.Category).Width(125);

         columns.Bound(o => o.Amount).Width(100).Format("{0:c}");

         columns.Bound(o => o.TranID);

         columns.Command(command => command.Destroy()).Width(200);

      })

  .DataSource(dataSource => dataSource

      .Ajax()

      .Model(model => model.Id(p => p.TranID))

      .Events(events => events.Error("error_handler"))

      .Create(create => create.Action("_CreateTransactionKendo", "Home"))

      .Read(read => read.Action("_SelectTransactionsKendo", "Home"))

      .Update(update => update.Action("_SaveTransactionKendo", "Home"))

      .Destroy(destroy => destroy.Action("_DeleteTransactionKendo", "Home"))

      .Batch(true))

  .Pageable()

  .ToolBar(commands => { commands.Create(); commands.Save(); })

  .Events(ev => ev.Save("function(e) { this.dataSource.sync() }"))

)

Controller:

[AcceptVerbs(HttpVerbs.Post)]

public ActionResult _SaveTransactionKendo([DataSourceRequest]DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<myTransaction> txns)

{

    List<myTransaction> list = (List<myTransaction>)TempData["trans"];

    if (txns != null && ModelState.IsValid)

    {

        myTransaction txn = txns.First();

        string id = txn.TranID;

        var target = list.Find(p => p.OFXTranID == id);

        if (target != null)

        {

            target.Description = txn.Description;

            target.Category = txn.Category;

            target.Amount = txn.Amount;

        }

    }

 

    TempData["trans"] = list;

 

    return Json(ModelState.ToDataSourceResult());

}

[Petur Subev]

Hi again Spephanie,

Yes it seems that the sync occurs before the model changes - you could use setTimeout to execute the update when the model has changed:
i.e.

.Events(ev => ev.Save(@"function(e){
                    setTimeout(function(){
                        $('#YourGrid').data('kendoGrid').dataSource.sync()
                    }
            )}"))

Let me know if further questions arise.

Kind regards,
Petur Subev
the Telerik team

[IT]

Thanks, Petur!  setTimeout did the trick.

[Anish]

Hi Petur,

I have a validation enabled on a cell fr numerics...on entering text to it it show a validation error ..but still allowing me to save the data from grid ..this save button is outside the grid, not the inbuilt update ..

so bottomline... if I have any invalid data still the data is getting saved with old values ..PLS HELP :)

[Princess]

I was able to follow @Anish and @Petur solution but when I'm retrieving the values on the controller all fields was null but when I look on the Firebug all the changes on the model was their. Am I doing something wrong?

@(Html.Kendo().Grid<PDMS.Models.Temp_File_Upload.TempFileUploadCreate>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.ID).Hidden(true)
                .ClientTemplate("#= ID #" +
                    "<input type='hidden' name='TempFileUploadCreate[#= index(data)#].ID' value='#= ID #' />");
            columns.Bound(c => c.ProjectFolderID)
                .ClientTemplate("#= ProjectFolderID #" +
                    "<input type='hidden' name='TempFileUploadCreate[#= index(data)#].ProjectFolderID' value='#= ProjectFolderID #' />");
            columns.Bound(c => c.FileName)
                .ClientTemplate("#= FileName #" +
                    "<input type='hidden' name='TempFileUploadCreate[#= index(data)#].FileName' value='#= FileName #' />");
            columns.Bound(c => c.GeneratedFileName).Hidden(true)
                .ClientTemplate("#= GeneratedFileName #" +
                    "<input type='hidden' name='TempFileUploadCreate[#= index(data)#].GeneratedFileName' value='#= GeneratedFileName #' />");
            columns.Bound(c => c.Tag)
                .ClientTemplate("#= Tag #" +
                    "<input type='hidden' name='TempFileUploadCreate[#= index(data)#].Tag' value='#= Tag #' />");
            columns.Command(command => {
                  command.Destroy().HtmlAttributes("<div class='k-button'><span class='k-icon k-edit'></span></div>").Text(" ");
                  command.Edit().HtmlAttributes("<div class='k-button'><span class='k-icon k-delete'></span></div>").Text(" ");
            }).Width(80);
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Pageable(p => p
                    .Refresh(true))
        .Sortable()
        .Scrollable()
        .Selectable(selectable => selectable.Type(GridSelectionType.Cell) )
        .DataSource(datasource => datasource            
            .Ajax()                                     
            .Events(events =>
            {
                events.Error("error_handler");             
            })                        
            .Model(model =>
            {                
                model.Id(p => p.ID);
                model.Field(p => p.FileName).Editable(false);
                model.Field(p => p.GeneratedFileName).Editable(false);
            })            
            .Read("FileDetails_Read", "File").Model(model =>
            {
                model.Field(p => p.ID).Editable(false);
                model.Field(p => p.FileName).Editable(false);
            })
            .Update("FileDetails_Update","File")
            .Destroy("FileDetails_Destroy", "File")
            )   
        .Events(events =>
        {
            
            events.Save("onGridSave");

        })     
        )
<script type="text/javascript">
  
  
        // alert("save");
        // when triggered save changes
//        //alert("done na ba?");
    function onGridSave(e) {
        setTimeout(function () {
            $("#Grid").data("kendoGrid").dataSource.sync();
        });
    }
    
    function index(dataItem) {
        var data = $("#Grid").data("kendoGrid").dataSource.data();

        return data.indexOf(dataItem);
    }

    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }


</script>

//Controller

 [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult FileDetails_Update([DataSourceRequest] DataSourceRequest request,[Bind(Prefix ="models")] PDMS.Models.Temp_File_Upload.TempFileUploadCreate entity)
        {
            
            var isSuccess = tempFileRepository.Update(entity.ID, entity.Tag ,User.Identity.Name.ToString());
            //var isSuccess = tempFileRepository.Update(entity);

            return Json(ModelState.ToDataSourceResult());            
        }

[Princess]

Ok, my problem is fixed. I forgot to change the client template absolute to my models name. Thanks for this thread!

[Jonathan Copelton]

Hi would you have any idea how you could do this in a grid hierarchy where the sub grids use #=Id# in their control name i.e.

.Name("Unitgrid_#=Id#")

 Thanks

 

[Dimiter Madjarov]

Hello Jonathan,

I covered the question in the support thread on the same topic. You could use the autoSync option of the dataSource.

Regards,
Dimiter Madjarov
Telerik