Forcing Synchronous Grid Action to prevent data dropping

2 posts, 0 answers
  1. Paul
    Paul avatar
    4 posts
    Member since:
    Sep 2016

    Posted 18 Apr Link to this post

    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>

     

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1727 posts

    Posted 19 Apr Link to this post

    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.
Back to Top