Edit cell values reset after search in Batch edit mode

[Eddie Willcox]

Hi,

On my view, I have a grid with editing enabled and set to Batch edit mode. I have also enabled the search bar in the grid Header

When I edit one of the rows and I enter a value to search for, I get a warning "Unsaved changes will be lost. Are you sure you want to continue?". When I click OK, the search results are displayed, but the values I entered were reset to the original value based on the grid data source.

I understand that this is normal behavior for the grid when in batch editing mode, but is there a way to override this? 

I am using batch edit mode as I am doing a mass save to database using all changed records. The changed records are pushed to an array on button click and then passed as JSON data to my controller. I would like to keep this functionality, but avoid losing any saved data when searching the grid.

[Rajapandiyan Settu]

Hi Eddie, 

Thanks for contacting Syncfusion support. 

By default, the batch changes will be discarded when you do other data actions like Searching, Sorting, Filtering, etc., in the Grid. But in your requirement, you want to perform the search action with the batch edited records. To achieve that, you need to save the changes first and then perform the search action in Grid. This can be achieved by using actionBegin and actionComplete of Grid. 

actionBegin: https://ej2.syncfusion.com/javascript/documentation/api/grid/#actionbegin 

actionComplete: https://ej2.syncfusion.com/javascript/documentation/api/grid/#actioncomplete 

    <script> 

      var SearchInEdit = false; 

      function actionBegin(args) { 

        if (args.requestType == 'searching') { 

          var gridIns = document.getElementById('Grid').ej2_instances[0]; 

          var batchChanges = gridIns.getBatchChanges(); 

          if ( batchChanges.addedRecords.length > 0 || batchChanges.deletedRecords.length > 0 || batchChanges.changedRecords.length > 0) { 

            SearchInEdit = true; 

            args.cancel = true; // prevent the search action 

            // execute the batchSave method to save the edited data to Grid’s dataSource 

            setTimeout(() => { 

              gridIns.editModule.batchSave(); // save the changes 

            }, 200); 

          } 

        } 

      } 

      function actionComplete(args) { 

        if (args.requestType == 'batchsave' && SearchInEdit) { 

          var gridIns = document.getElementById('Grid').ej2_instances[0]; 

          SearchInEdit = false; 

           // search the Grid once the save action done 

          gridIns.search(gridIns.element.querySelector('#' + gridIns.element.id + '_searchbar').value.toLowerCase()); 

        } 

      } 

    </script> 

Please get back to us if you need further assistance with this. 

Regards, 

Rajapandiyan S 

[Eddie Willcox]

Thank you.

This works as expected, but I have one more requirement:

I need to post all changed records to my controller. Once the batchSave method is triggered, there will no longer be any changed records. 

How do I go about capturing the changed records to be sent to my controller upon button click?

I currently use the changedRecords to send to my controller. 

[Rajapandiyan Settu]

Hi Eddie, 

Thanks for your update. 

In your requirement, you want to perform search action with the batch edited records. For that, we need to save the changes in the Grid before start searching a value. So, we prevent the search action in the actionBegin event and manually execute the batchSave method in that event. It saves the changes in Grid dataSource. 

Once the save action done, the getBatchChanges method returns empty records since all the changes saved to the dataSource. This is the default behavior of Grid. 

We need more information on your query, so share the below details to proceed further. 

1. Why you want to save the changes by external button click? By default, the changes will be saved by executing batchSave method.

2. How could you perform the CRUD actions in the Grid?

3. Which type of data-binding (local data/remote data) you have used? Share the Adaptor details.

 

4. Share the complete code you have used.

 

5. Share the video demo of your requirement.

Regards, 

Rajapandiyan S 

[Eddie Willcox]

Hi.

1. Why you want to save the changes by external button click? By default, the changes will be saved by executing batchSave method.

This is because I am populating a secondary grid with the batch changes. The secondary gives the user the opportunity to verify and confirm that what they have entered is correct before saving to the database.

2. How could you perform the CRUD actions in the Grid?

Not sure what you mean here. Please elaborate.

3. Which type of data-binding (local data/remote data) you have used? Share the Adaptor details.

Local data. Not using adaptors. Main Grid datasource comes from ViewBag.

[Joseph Christ Nithin Issack]

Hi Eddie, 

   Thanks for your update. 

   Before we proceed with the solution, please share the complete code you are using and the video demonstration of the steps you are doing  for better understanding of what actions you are trying to perform  

Regards, 

Joseph I. 

[Eddie Willcox]

Apologies for only getting back to you now. I've managed to work around this issue by using BeforeBatchSave method on the grid. Here I use a javascript function to build an array of unique grid rows to pass through to my controller or to my secondary view.

[Rajapandiyan Settu]

Hi Eddie, 

We are glad that you have resolved your query by using beforeBatchSave event. 

 

Please get back to us if you need further assistance with this. 

 

Regards, 

Rajapandiyan S