Force incell save on mouse out

6 posts, 0 answers
  1. Marc
    Marc avatar
    128 posts
    Member since:
    Jul 2010

    Posted 18 Oct 2017 Link to this post

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

  2. Marc
    Marc avatar
    128 posts
    Member since:
    Jul 2010

    Posted 18 Oct 2017 Link to this post

    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?

     

     

  3. Marc
    Marc avatar
    128 posts
    Member since:
    Jul 2010

    Posted 18 Oct 2017 in reply to Marc Link to this post

    scratch that, I don't think the above works either
  4. Preslav
    Admin
    Preslav avatar
    516 posts

    Posted 19 Oct 2017 Link to this post

    Hello Marc,

    Achieving the desired result will require the usage of the autoSync configuration of the dataSource.
    If the above configuration is set to true, the dataSource will automatically save any changed data items by calling the sync method.

    For example:
    I hope this helps.


    Regards,
    Preslav
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Marc
    Marc avatar
    128 posts
    Member since:
    Jul 2010

    Posted 19 Oct 2017 Link to this post

    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?
  6. Preslav
    Admin
    Preslav avatar
    516 posts

    Posted 23 Oct 2017 Link to this post

    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:
    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top