This is a migrated thread and some comments may be shown as answers.

Forcing Synchronous Grid Action to prevent data dropping

1 Answer 109 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 1
Paul asked on 18 Apr 2017, 09:08 PM

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>

 

1 Answer, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 19 Apr 2017, 11:57 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Paul
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Share this question
or