I have a custom page with vertical tab iterating the values, On click of each Tab, will display the data in data table based on the tab.

In my data table i have custom button in a column, On clicking the button will update the field in custom object by calling apex method.

Update is working but not sure the data is not refreshing.(Means it should not display in data table).

  <lightning-vertical-navigation-section label="Review Enrollment">
 <template for:each={programTypeData} for:item="program">
                                    <lightning-vertical-navigation-item-icon key={program.Id}
                                        data-record-id={program.Id} data-id={program.Id} label={program.Name}
                                        name={program.Name} icon-name="standard:knowledge"

  <template if:true={programConfirmModal}>
            <div class="demo-only" style="height: 640px;">
                <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true"
                    aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                    <div class="slds-modal__container">
                        <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-stup">
                                <h2><b>Are you sure want to add this Program!</b></h2><br />
                        <footer class="slds-modal__footer">
                            <lightning-button label="No" variant="neutral" onclick={closeModal}>
                            <lightning-button label="Yes" variant="brand" onclick={handleEnrollStudentProgram}>
                <div class="slds-backdrop slds-backdrop_open"></div>



import { refreshApex } from "@salesforce/apex";
@track pendingProgramColunms = [
    { label: "Family Name", fieldName: "FamilyName" },
    { label: "Student Name", fieldName: "StudentName" },
    { label: "Program Id", fieldName: "Name" },
    { label: "Program Name", fieldName: "Program_Name__c" },
      label: "Start Date",
      fieldName: "Program_Start_Date__c",
      type: "date",
      typeAttributes: {
        day: "numeric",
        month: "numeric",
        year: "numeric"
      label: "End Date",
      fieldName: "Program_End_Date__c",
      type: "date",
      typeAttributes: {
        day: "numeric",
        month: "numeric",
        year: "numeric"
      label: "Price",
      fieldName: "Program_Price__c",
      type: "currency",
      typeAttributes: { currencyCode: "USD" }
      label: "",
      type: "button",
      initialWidth: 100,
      typeAttributes: {
        label: "Enroll",
        name: "add_program",
        title: "Add Program to Student",
        variant: "brand"

handleprogramType(event) {
    this.programRecordTypeId = event.target.dataset.recordId;
    this.programName = event.target.name + " Program";
      accountId: this.recordId,
      ProgramRecordTypeId: this.programRecordTypeId,
      studentName: ""
    }).then((programresult) => {
    this.wiredPendingProgramDataRefresh = programresult;
      if (programresult) {
        //  this.programTypedata = programresult;
        this.programTypedata = programresult.map((record) =>
              FamilyName: record.Student__r.Account.Name,
              StudentName: record.Student__r.Name

        this.showPendingPrograms = true;
      } else if (error) {
        this.error = error;

      if (programresult.length <= 0) {
        this.programMessage = "No Data Found!";
      } else {
        this.programMessage = "";

 handleEnrollStudentProgram() {
   EnrollStudentProgram({ studentprogramId: this.studentProgramId })
     .then(() => {
       this.variant = "success";
       this.title = "Success";
       this.message = "Program Sucessfully Enrolled!";
       this.programConfirmModal = false;
       return refreshApex(this.wiredPendingProgramDataRefresh);
     .catch((error) => {
       (this.title = "Error"),
         (this.message = "Failed to Enroll the Program"),
         (this.variant = "error");
   const evt = new ShowToastEvent({
     title: this.title,
     message: this.message,
     variant: this.variant
   this.variant = "";
   const toastModel = this.template.querySelector('[data-id="toastModel"]');
   toastModel.className = "slds-show";

   this.delayTimeout = setTimeout(() => {
     const toastModel = this.template.querySelector('[data-id="toastModel"]');
     toastModel.className = "slds-hide";
   }, this.autoCloseTime);

   return refreshApex(this.wiredPendingProgramDataRefresh);


 @AuraEnabled (cacheable = true)
public static List<Student_Program__c> getStudentProgramTypes(Id accountId, Id ProgramRecordTypeId, string studentName) {
    system.debug('ProgramRecordTypeId  --> ' + ProgramRecordTypeId);
    system.debug('studentName  --> ' + studentName);
    string strSearch = '%'+ studentName + '%';  
    return[SELECT    Name, Student__r.Account.Name,Student__r.name,Program_Name__c, Program_Start_Date__c, Program_End_Date__c, Program_Price__c FROM Student_Program__c 
           WHERE Enroll_Status__c = 'Enroll In Progress' and Student__r.Account.ParentId =:accountId  
           and Program__c in(SELECT Id FROM Programs__c WHERE RecordTypeId =:ProgramRecordTypeId) AND
           (Student__r.name LIKE:strSearch 
            Student__r.Account.Name LIKE:strSearch 
            Program_Name__c LIKE:strSearch)];

I don't see the @wire for wiredPendingProgramDataRefresh property. Calling getStudentProgramTypes() in your file does not setup the wire service.

When using the @wire decorator, you can either set a property or call a function.

The documentation shows destructured objects being passed into a function. If you do a refresh on the destructured data, then the wire service does not refetch the data. Decorate a Function with @wire

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.