How to call Create and Update method synchronously in Kendo Grid

[abdul]

Hi,

I have a requirement of validation in server side. During adding a new record and update few old records in Kendo Grid and click on Save button it calls the Create and Update method asynchronously. But when i am adding a new record based on its value i need to validate in update method.

But when click on Save button i calls the Create and Update method asynchronously so my validations doesn't work as expected.

Can we run the Create and Update method synchronously one after another when i am adding a new row and update few old row values and click on Save button.

 

[abdul]

Hi,

My requirement is for each Allocation Date Allocation should be 1.

Scenario 1 : Suppose I have added one record by Add new record button, AllocationDate is 10/31/2024 and with this AllocationDate  we are doing 1st entry then allocation should be 1.

Scenario 2 : Suppose we have one entry for AllocationDate  10/31/2024 and Allocation 1, if we add another entry for the same AllocationDate  10/31/2024  then the sum of both the allocation should be 1.

Since previous record already have allocation 1, then while adding a new record suppose i can add allocation as o.4 and the old record allocation I will reduce from 1 to 0.6, so both the records with same AllocationDate  10/31/2024  have allocation as 1. i,e 0.4+0.6 = 1

The issue I am facing is when I am adding a record and at the same time updating the allocation , its calling Kendo Grid Create and Update method asynchronously, so the validation for this scenario is not working as expected. If it will call Create method complete everything and then call update method then I can track of new and updated value of allocation and if its sum of allocation is not equal to 1 then I can send error response to the user.

Please, let me know if anyone need more details about the requirement.

[Mihaela]

Hello Abdul,

By design, the "Save changes" command saves all pending changes by calling the sync() method of the DataSource. To trigger the Create and Update requests synchronously, you need to create a custom "Save changes" command and call the requests manually based on your requirements to validate the data server-side. For example:

• Add a custom button in the Grid's toolbar and handle its "click" event:

  @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
      .Name("grid")
      .ToolBar(toolbar => {
          toolbar.Create();
          toolbar.Custom().ClientTemplate(
             Html.Kendo().Template().AddComponent(c => c
                 .Button()
                 .Name("customSaveBtn")
                 .Content("Save Changes")
                 .Events(ev => ev.Click("onClick"))
             ));
      })
      ...
  )

• Within the "click" event handler, check if the Grid contains both new and edited records, which are unsaved and trigger the respective AJAX requests to the server:

<script type="text/javascript">
function onClick() {
    var grid = $("#grid").data("kendoGrid");
    let createdItems = grid.dataSource.data().filter(item => item.isNew()); // access the new records
    let editedItems = grid.dataSource.data().filter(item => !item.isNew() && item.dirty == true); // access the edited records
    if(createdItems.length > 0 && editedItems.length > 0) {
        let models = JSON.parse(JSON.stringify({ createdItems }));
        //send an AJAX request to the Controller to add the new records
        $.ajax({
            type: 'POST',
            url: '@Url.Action("Create", "Grid")',
            data: models,
            success: function (data) {
                console.log("success request");
            }
        }).done(function (response) {
             //send an AJAX request to the Controller to edit the existing records
             return $.ajax({
               url: '@Url.Action("Update", "Grid")',
               type: 'POST',
               data: JSON.parse(JSON.stringify({ editedItems })),
               success: function (data) {
                 grid.dataSource.read(); // load the latest data
               }
             });
        });
    } else {
        grid.dataSource.sync();
    }
}
</script>

I hope this example will help you to achieve the desired result.

 

Regards,
Mihaela
Progress Telerik