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.

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

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?

Thanks, Petur!  setTimeout did the trick.

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 :)

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

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

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

 

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