[SalesForce] Data Table with Inline Editing — On click of Edit button Page got refreshed LWC

On click of Data Table with Inline Edit, whole page got refreshed, Not able to find the issue. Can anyone please help me on this? ( LWC using in Visual-force Page)

JS:

import { LightningElement, track, api, wire } from "lwc";
import { getRecord, getFieldValue } from "lightning/uiRecordApi";
import { ShowToastEvent } from "lightning/platformShowToastEvent";
import createParentGuardian from "@salesforce/apex/GetParentGuardianController.createParentGuardian";
import getParentdetails from "@salesforce/apex/GetParentGuardianController.getParentdetails";
import { refreshApex } from "@salesforce/apex";

import FIRSTNAME_FIELD from '@salesforce/schema/Contact.FirstName';
import LASTNAME_FIELD from '@salesforce/schema/Contact.LastName';
import ID_FIELD from '@salesforce/schema/Contact.Id';

const columns = [
{ label: "First Name", fieldName: "FirstName", editable: true },
{ label: "Last Name", fieldName: "LastName" },
{ label: "Phone", fieldName: "Phone", type: "phone" },
{ label: "Email", fieldName: "Email", type: "email" },
{ label: "Student Relation", fieldName: "Student_Relation__c" }
];



@track error;
 @track data;

 @wire(getParentdetails, { enrollmentName: "a082w000000YUH5AAO" })
 getContacts(response) {
console.log('one');
    this.wiredDataRefresh = response;
const data = response.data;
const error = response.error;
if (data) {
  this.data = data;
  return refreshApex(this.wiredDataRefresh);
} else if (error) {
  this.error = error;
}
}



handleSave(event) {
const fields = {};
    fields[ID_FIELD.fieldApiName] = event.detail.draftValues[0].Id;
    fields[FIRSTNAME_FIELD.fieldApiName] = event.detail.draftValues[0].FirstName;
    fields[LASTNAME_FIELD.fieldApiName] = event.detail.draftValues[0].LastName;
    const recordInput = {fields};

    updateRecord(recordInput)
    .then(() => {
      this.dispatchEvent(
          new ShowToastEvent({
              title: 'Success',
              message: 'Contact updated',
              variant: 'success'
          })
      );
      // Clear all draft values
      this.draftValues = [];

      // Display fresh data in the datatable
      return refreshApex(this.wiredDataRefresh);
  })

  }

HTML:

 <div class="slds-p-top_x-large">
                            <lightning-datatable key-field="Id" data={data} columns={columns}
                                draft-values={draftValues} hide-checkbox-column="true" onsave={handleSave}
                                resize-column-disabled="true">
                            </lightning-datatable>
                        </div>

Best Answer

In your getParentdetails wire I think you are triggering the refreshApex unnecessarily:

if (data) {
  this.data = data;
  return refreshApex(this.wiredDataRefresh);  // Remove this
}

I think this might be causing the problem in your component.

Related Topic