Forcing Synchronous Grid Action to prevent data dropping

[Paul]

Hello,

Is there any way to force a script (javascript/jquery) to wait for the Grid sync to complete?

OR any way to retrieve the grid's model with data so as to perform a last update manually?

 

Currently due to timing with the async calls:

$("#Grid").data("kendoGrid").saveChanges();

OR

$("#OfficerGrid").data().kendoGrid.dataSource.sync();

There is data-loss when navigating to another page if it is done too soon after these calls are made.

 

I have setup and stepped through the existing event calls for both the grid (http://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/GridEventBuilder) and datasource (http://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/DataSourceEventBuilder).

All around it seems the DataSource .Sync() event is the last one triggered.

 

Here is the definition for the Grid:

@(Html.Kendo().Grid<NexusPWI.ViewModels.Wizard.ReportingViewModel>()
                            .Name("Grid")
                            .Columns(c =>
                            {
                                c.Bound(vm => vm.FirstName).Width(120);
                                c.ForeignKey(vm => vm.LocationNumber, (System.Collections.IEnumerable)ViewData["LocationsList"], "LocationNumber", "Drop_Text").HtmlAttributes(new { onchange = "triggerDropChange(this);" }).Width(100).Hidden(Model.Locations_ColumnInitHidden); 
                                c.Bound(vm => vm.State).Width(120);
                                c.Command(command => { command.Destroy(); }).Width(40);
                                c.Template(@<text></text>);//Blank Column to handle Scrollable variable width so headers do not skew
                            })
                            .Scrollable(s => s.Enabled(true).Height("auto"))//Scrollable to control column widths
                            .ToolBar(toolbar =>
                            {
                                toolbar.Template("<div class='col-lg-3'>" +
                                    "<a class='pull-right k-button k-button-icontext k-grid-save-changes' href='javascript:void(0)'><span class='k-icon k-update'></span>Save All</a>" +
                                    "<a class='pull-right k-button k-button-icontext k-grid-add' href='/Wizard/EmployeePayrollRead?EmployeeGrid-mode=insert'><span class='k-icon k-add'></span>Add Row</a>" +
                                    "</div>");
                            })
                            .Editable(editable => editable.Mode(GridEditMode.InCell)
                                .CreateAt(GridInsertRowPosition.Bottom)
                                )
                            .Navigatable()
                            .Pageable()
                            .DataSource(dataSource => dataSource
                                .Ajax()
                                .Batch(true)
                                .ServerOperation(false)
                                .Events(events => events.Error("employeeGrid_error")
                                      .RequestEnd("Grid_RequestEnd")
                                      .Change("Grid_Delete")
                                      .Sync("sendEnable")
                                    )
                                .Model(model => model.Id(vm => vm.PolicyHolderPayroll_EmployeeGridId))
                                .PageSize(1000)
                                .Create("EmployeePayrollCreate", "Wizard")
                                .Read("EmployeePayrollRead", "Wizard")
                                .Update("EmployeePayrollUpdate", "Wizard")
                                .Destroy("EmployeePayrollDestroy", "Wizard")
                        ))

 

With a call to navigate and save:

<a class='k-button k-button-icontext k-grid-save-changes pull-right' href='javascript:save_Grids_n_Move()'><span class='k-icon k-update'></span>Save All</a>

<script>

function save_Grids_n_Move() {
        var Grid_save = $("#Grid").data().kendoGrid;
        Grid_save.dataSource.sync();

    element.closest("form").each(function () {
                    var form = $(this);
                    form.attr("action", action);
                    form.submit();
                });
    }

</script>

 

[Viktor Tachev]

Hello Paul,

I have replied to your query in the support thread and suggest we continue the conversation there if you have further queries. 

With that said, please avoid submitting duplicate threads. This will enable us to keep better track of the support history and provide answers faster.

Regards,
Viktor Tachev
Telerik by Progress