I have a parent component that passes a list of records to a child.
<c-gs-list account-id={accountId} filteredgroupstructures={filteredgroupstructures} onclose = {refreshHandler}></c-gs-list>
From the child, I want to be able to edit in the datatable (inline editing). I have this working, however, the parent is not refreshing. I have looked at getREcordNotifyChange but thats now working for me.
Here is my lightning-datatable in the child:
<lightning-datatable
id="pdftable"
data={filteredgroupstructures}
columns={columns}
column-widths-mode={auto}
key-field="Id"
sorted-by={sortBy}
sorted-direction={sortDirection}
onsort={handleSortdata}
onrowaction={handleRowActions}
draft-values={draftValues}
onsave={handleSave}>
</lightning-datatable>
Here is my handleSave method on child:
handleSave(event) {
const updatedFields = event.detail.draftValues;
// Prepare the record IDs for getRecordNotifyChange()
const notifyChangeIds = updatedFields.map(row => { return { "recordId": row.Id } });
try {
// Pass edited fields to the updateContacts Apex controller
const result = updateGs({data: updatedFields});
getRecordNotifyChange(notifyChangeIds);
// Clear all draft values in the datatable when done
this.draftValues = [];
//reset the columns to remove the highlighting of those that were updated
this.columns = [...this.columns];
this.dispatchEvent(
new ShowToastEvent({
title: 'Success',
message: 'Group Structures updated',
variant: 'success'
})
);
} catch(error) {
this.dispatchEvent(
new ShowToastEvent({
title: 'Error updating or refreshing records',
message: error.body.message,
variant: 'error'
})
);
};
//call closeHandler to pass data back to parent component
this.closeHandlerParent()
}
And finally, here is the refreshHandler in the parent component.
//triggered from grandchild or child to refresh data form changes on child and grandchild components
refreshHandler(event){
console.log('Im in the refreshHandler on gsWizard');
refreshApex(this.refreshTable);
refreshApex(this.getgroupstructurelist);
}
Updated - here is the start of the wire that includes the refreshapex.. there is a lot of code in the wire.. let me know if you need the entire wire.
@wire(getgroupstructures, {accountId:'$accountId'})
groupstructures(result) {
console.log('im in the wire ' );
/* eslint-disable no-unused-vars */
//variables to set data and filter fields
var GroupNumbersList = [];
var GroupNumbersListDeduped = [];
var SectionsList = [];
var SectionsListDeduped = [];
var PackagesList = [];
var PackagesListDeduped = [];
var ProductsList = [];
var ProductsListDeduped = [];
//if we have data returned
if (result.data && result.data.length) {
//assign the data to the data variable - used as the source for the main datatable
this.data = result.data;
//set the groupstructurelist with all group structures returned for account - this variable ALWAyS
// holds all of the returned group structures, even when the data variable is fitlered
this.groupstructurelist = result.data;
//also set the filteredgroupstructures variable which is used as a go-between when fitlering the data variable
this.filteredgroupstructures = result.data;
//since we have data, update error to undefined
this.error = undefined;
//set the numberrecords field w hich displays on the page
this.numberrecords= this.data.length;
//set the account name field from first gs in list
///// this.accountName =this.data[0].Account__r.Name;
//needed when we need to refresh the table based on changes in child and grandchild components
this.refreshTable = result;
...............
...............
The refreshHandler is getting called but the wire does not get called to refresh the records. I have successfully added edit pages and new record pages but I'm unsure of how to refresh the list on the primary component after updating from the child using inline editing. Any help would be greatly appreciated! thanks!