Parent Child Grid - Edit operation does not save updated data

Question

I have parent and child grid. While i can successfully load data in both the grids. I can not get the updated data once Edit and then update button is clicked on the child grid.

I am using ActionComplete event and batchsave request in order to capture the data.

Basically, On action complete event if requesttype is batchsave then i loop through all child rows and then convert that into JSON array and save them in my database.

However, While looping through rows in child grid. i always get old data and somehow not getting the latest/updated data. I have also noticed that when i click on the update button within toolbar of child grid. it resets to old data.

What Am I missing here.

following is my sample code for reference:

 actionComplete:this.onChildActionComplete.bind(this),
        rowSelected:this.childrowSelected.bind(this),
        beforeBatchSave:this.onBeforeBatchSave.bind(this),


onBeforeBatchSave(args):void{
    if (args.batchChanges.addedRecords.length !== 0) { 
      // The current queryString value is set to the child Grid’s added data 
      args.batchChanges.addedRecords.forEach(dat => dat["ProjectIdentifier"] = this.currentPId); 
    } 
  }

onChildActionComplete(args):void{
      if(args.requestType=='batchsave'){
        try{
            let that=this;
            let newData:any=[];
            that.spinner.show();
            setTimeout(() => {
              this.currentPId=that.currentPId; //args.rows[0].data.ProjectIdentifier; does not work on all rows deleted
               item["Data"]=JSON.stringify([]);
              that.spinner.hide();  
          },1000);
        }catch(e){
          console.log("error in Action Complete");
        }
      } 
  }

Ajith Govarthan · Answer

Hi PDev, 

Thanks for contacting Syncfusion support. 

Based on your query you are facing data update issue in child grid with batch edit mode in your Grid application. So, we have prepared sample with hierarchy grid and batch edit mode, which updates the data properly without any issues. For your convenience, we have attached the sample please refer them for your reference. 

Code example: 




App.component.ts 

this.childGrid = { 
      dataSource: orderDatas, 
      toolbar: ['Add', 'Edit', 'Update', 'Cancel', 'Delete'], 
      editSettings: { 
        allowEditing: true, 
        allowDeleteting: true, 
        allowDeleting: true, 
        mode: 'Batch', 
      }, 
      queryString: 'EmployeeID', 
      allowPaging: true, 
      actionComplete: (args) => { 
        if (args.requestType === 'batchsave') { 
          console.log(args); // check for the updated data here 
        } 
      }, 
      pageSettings: { pageSize: 6, pageCount: 5 }, 
      columns: [ 
        { 
          field: 'OrderID', 
          headerText: 'Order ID', 
          isPrimaryKey: true, 
          textAlign: 'Right', 
          width: 120, 
        }, 
        { field: 'ShipCity', headerText: 'Ship City', width: 120 }, 
        { field: 'Freight', headerText: 'Freight', width: 120 }, 
        { field: 'ShipName', headerText: 'Ship Name', width: 150 }, 
      ], 
    }; 
  } 

Sample Link: https://stackblitz.com/edit/angular-f4vguf?file=app.component.ts 

Note: Please ensure that you have primarykey column in your child grid component to perform the CRUD actions properly in your Grid application. 

Regards, 
Ajith G.

Daniel Tam · Answer

Hi,I'm trying to add to the child grid.  Adding "allowAdding: true" to editSettings gives me the option to add.  I'm able to collect the data that is to be added; however, the grid does not reflect it.  It seems as if the grid was unable to write to the dataSource and is refreshed by the dataSource?This is the same behavior even if adding "alowAdding: true" to the sample link provided above.Thanks

Aishwarya Rameshbabu · Answer

Hi
Daniel Tam,Upon
reviewing your inquiry, we have observed that you are encountering challenges
when adding records to the child grid in the Syncfusion Grid. It is important
to provide a value for the 'queryString' in the added data when adding a
record to the child grid. We have developed a sample illustrating this by
passing the queryString value to the added data in the toolbarClick event of
the Grid. For more detailed information, please refer to the code example,
sample, and video demonstration provided below.

App.component.ts
   
          toolbarClick(args: ClickEventArgs) {            
              if (args.item.text==='Update') {
                   // `parentKeyFieldValue` refers to the queryString field value of the parent record.
                  const parentFieldValue = (this.parentDetails as ParentDetails)?.parentKeyFieldValue;
                  let addedRecords = (this as any).editModule.getBatchChanges().addedRecords;
                  for (let i = 0; i <= addedRecords.length; i++) {
                      if (typeof parentFieldValue === 'number') {
                          (this as any).editModule.getBatchChanges().addedRecords[0].EmployeeID = parentFieldValue; 
                      }
                  }
              }
          }

Sample:
https://stackblitz.com/edit/github-res7wa-mxbwcx?file=src%2Fapp.component.tsAPI
References: toolbarClickIf
you need any other assistance or have additional questions, please feel free to
contact us.RegardsAishwarya
RAttachment: 170383VideoDemo_2a36fbfe.zip