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!
