[SOLVED] How can I delete a detail row in master-detail grid with Ag Grid?

How can I delete a detail row in master-detail grid with Ag Grid?

I am using this Ag Grid functionality. The only place I was able to find where the detail rows get passed to the Ag Grid is here:

    getDetailRowData: params => {
        params.successCallback(params.data.callRecords);
    }

So, once the callRecords get passed, there is no way to modify the detail rows. I tried keeping track of the callRecords and then modifying the corresponding array, but it did not have any effect:

getDetailRowData: params => {
    this.callRecords = params.data.callRecords;
    params.successCallback(this.callRecords);
}

//later on I do
this.callRecords.splice(0, 1);

So, is there any way to modify (remove in my particular case) the detail rows?

Solution

You need to invoke a transaction update on the master row (as described in the docs):

this.gridApi.applyTransaction({ update: [masterDataToUpdate] });

Provided that you set refreshStrategy: 'rows' in Detail Cell Renderer, the getDetailRowData callback will be invoked again and detail grid refreshed. This is described in the docs here.