Force incell save on mouse out

[Marc]

Is there an accepted way to force a grid with incell editing to invoke an update when the user remove focus from the edited cell? We currently use the approach below but it has become unreliable and sometimes does not properly update the UI elements (loading spinner never disapears, dirty indicator doesn't disappear, etc)

 

 

             ev.Save(@"function(e){
                    setTimeout(function(){
                        $('#ExecutionPartGrid').data('kendoGrid').dataSource.sync()})}"
                  );

[Marc]

It looks like explicitly calling saveChanges on the grid on the save event seems to work.

function onSave {

var grid = $("#MyGrid").data("kendoGrid");

grid.saveChanges();

}

 

Is there a better approach?

 

 

[Marc]

scratch that, I don't think the above works either

[Preslav]

Hello Marc,

Achieving the desired result will require the usage of the autoSync configuration of the dataSource.

• https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-autoSync

If the above configuration is set to true, the dataSource will automatically save any changed data items by calling the sync method.

For example:

• http://dojo.telerik.com/uqagIz

I hope this helps.


Regards,
Preslav
Progress Telerik

[Marc]

When I set .AutoSync(true) using the MVC wrapper, the grids update method is called, but the busy indicator won't disappear. Any ideas what would cause this behavior?

[Preslav]

Hello Marc,

Based on the provided information, I am not sure what is causing this behavior.

I also tried to replicate the problem. I used the "Batch editing" demo as a base:

• http://demos.telerik.com/aspnet-mvc/grid/editing

Now the code looks like:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.UnitPrice).Width(140);
        columns.Bound(p => p.UnitsInStock).Width(140);
        columns.Bound(p => p.Discontinued).Width(100);
        columns.Command(command => command.Destroy()).Width(150);
    })
    .ToolBar(toolbar =>
    {
        toolbar.Create();
        toolbar.Save();
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Pageable()
    .Navigatable()
    .Sortable()
    .Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .AutoSync(true)
        .Batch(true)
        .PageSize(20)
        .ServerOperation(false)
        .Events(events => events.Error("error_handler"))
        .Model(model => model.Id(p => p.ProductID))
        .Create("Editing_Create", "Grid")
        .Read("Editing_Read", "Grid")
        .Update("Editing_Update", "Grid")
        .Destroy("Editing_Destroy", "Grid")
    )
)
<script type="text/javascript">
    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>

Having said that, could you please elaborate on the exact scenario? Additionally, feel free to share a sample runnable project that clearly demonstrates the issue. This project would help us fully understand the case and we will be able to provide assistance to the best of our knowledge.


Regards,
Preslav
Progress Telerik