setRowData breaking when editing set to Cell

[James Boomer]

so I've created a tree grid that when the child rows are edited it updated the parent data as well as the rest of the row data to force it to stay  within a certain threshold that we set.

So we used a method like this:

completeEdit:function(args) {

      if (args.type === 'save') {

        let rowDataFeed = args.data;

        CashFlowApiService.saveRow(rowDataFeed).then(responseData => {

            let childData = responseData.rowdata;

            args.data = childData.data;

            this.$refs.cashFlowGrid.setRowData(childData.id, childData.data);

            let parentData = responseData.parentdata;

            this.$refs.cashFlowGrid.setRowData(parentData.id, parentData.data);

            this.$refs.cashFlowGrid.hideSpinner();

          })

      }

We call this in the treegrid for the ActionComplete Event.  It works the row data is updated.  But we are enable to edit any more after that.  It appears the setting the rowData  breaks allot of the binding on the child grid.

to test i have an external button to set a particular row data.  Once i try to edit that same row i get a bunch of errors

[Shek Mohammed Asiq Abdul Jabbar]

Hi James,

Greetings from Syncfusion support.

Thank you for sharing the details of your implementation. We understand that the issue arises after updating the parent record using setRowData during the editing of child rows.

We attempted to replicate the issue on our end by updating parent records using setRowData after editing child rows but could not reproduce the reported behavior. To assist you further, we request the following details:

1. Are you updating the currently editing cell using setRowData?
2. Kindly share the complete TreeGrid code snippet for our reference.
3. If possible, please provide a video demonstration or screenshots illustrating the issue.
4. If we missed anything in the provided sample, please share an issue-replicating sample with your specific configuration.

Sample:

https://stackblitz.com/edit/szxnh7at-hsx7skwc?file=src%2FApp.vue

These details will help us identify the root cause and provide an appropriate solution.

Looking forward to your response.

Regards,
Shek

[James Boomer]

i found the issue, it has to do with timing.  For anyone with this issue.  when you set editing to cell mode.  after editing a cell if you hit tab or move to the next cell it automatically open it in edit mode, before the actionComplete finishes for the previous cell.  So in my case if i edited a cell and then sent that request to the server and then used SetData to update that same row.  if i had moved onto another cell it will through all kinds of errors since it is editing the same row that it is setting data for.  I was able to figure this out when instead of clicking to a new cell or hitting it clicked off the grid controls it didn't error.

Something to note for anyone else struggling with this.  i was able to work around the timing issue by setting a boolean  data object  in the cellSave method.   and then checking in the cellEdit Method if that was true meaning the cell had not finished being refreshed then it cancelled the Edi request.

below are my 2 methods

preventEditing:function(args){

      if(args.type=='edit'){

        if(args.rowData.hasChildRecords === true){

          args.cancel = true

        }else{

          if(this.cellInEditMode == true){

            args.cancel = true

          }

        }

      }

    },

[Shek Mohammed Asiq Abdul Jabbar]

Hi James,

Thank you for sharing your observations and workaround.

As you correctly noted, timing plays a significant role when using cell editing mode in the TreeGrid. When editing a cell and moving to the next cell (via tab or navigation), the new cell automatically enters edit mode before the actionComplete event for the previous cell finishes. This can cause conflicts, especially when updating the row data using setData during a server-side update.

Your approach is correct, but you can further enhance your workaround by leveraging the cellSaved event to manage the timing and ensure smooth editing. The cellSaved event triggers once the cell edit is completed, making it an ideal place to avoid overlapping edits.

Let us know if you need further assistance or clarification.

Regards,

Shek