0

I have a use case where I am fetching records by searching and showing them in a datatable. After that using checkboxes I select some records and delete them. But the problem is after deleting the datatable does not show the updated records.

html -->

<template>
    <lightning-card>

        <h3 slot="title">
            <img src={stupng} width="42" height="30" style="vertical-align:top">
                Student Informations
        </h3>

        <lightning-layout multiple-rows="true" vertical-align="end">
            <lightning-layout-item size="12" small-device-size="4" medium-device-size="2" padding="around-small">
                <div class="slds-form-element">
                    <div class="slds-form-element__control">
                        <lightning-combobox title="Search student" label="Enter Detail" value={studentSearchParameter} placeholder="--Select--"
                        options={options} onchange={handleOptionChange} required></lightning-combobox>
                    </div>
                </div>
            </lightning-layout-item>

            <lightning-layout-item size="12" small-device-size="4" medium-device-size="2" padding="around-small">
                <lightning-button title="Search Button" label="Search" variant="brand" icon-name="utility:search" 
                icon-position="right" onclick={handleStudentSearch}></lightning-button>
            </lightning-layout-item> 
            
            <lightning-layout-item size="12" small-device-size="4" medium-device-size="2" padding="around-small">
                <lightning-button title="Delete Button" label="Delete" size="small" variant="brand" icon-name="utility:delete" 
                icon-position="right" onclick={deleteStudentRowAction}></lightning-button>
            </lightning-layout-item> 
        </lightning-layout>     
        
        <div> 
            <lightning-datatable
                key-field="Id"
                data={studentRec}
                columns={c}
                onrowselection={getSelectedIdAction}>   
            </lightning-datatable>
        </div>

    </lightning-card> 
</template>

js -->

import { LightningElement, track, api, wire } from 'lwc';
import searchStudent from '@salesforce/apex/lwcStudentSearch.searchStudent';
import deleteMultipleStudentRecord from '@salesforce/apex/lwcStudentSearch.deleteMultipleStudentRecord';
import {ShowToastEvent} from 'lightning/platformShowToastEvent'
import studentlogo from '@salesforce/resourceUrl/studentlogo'
import { refreshApex } from '@salesforce/apex';

const columns = [
{ label: 'Student Name', fieldName: 'Name' },
{ label: 'Roll Number', fieldName: 'Roll_Number__c', type:'Number'},
{ label: 'Location', fieldName: 'Geo_Location__c', type: 'Lookup' },
];

const options = [
    {label:'Aaron',value:'Aaron'},
    {label:'Aayush',value:'Aayush'},
    {label:'Prakriti',value:'Prakriti'},
    {label:'Krishna',value:'Krishna'},
    {label:'Akash',value:'Akash'},
    {label:'Sourav',value:'Sourav'},
    {label:'Prakash',value:'Prakash'},
    {label:'David',value:'David'},
    {label:'Rohit',value:'Rohit'},
    {label:'Christian',value:'Christian'},
    {label:'Katy',value:'Katy'},
    ];

export default class LwcStudentSearch extends LightningElement {

@track studentRec;
searchValue = '';
c=columns
stupng = studentlogo
@track options=options;
@api selectedStudentIdList=[];

handleOptionChange(event) {       
   this.searchValue = event.detail.value;
}

handleStudentSearch() {
    
    if (this.searchValue !== '') {
        searchStudent({
            searchKey: this.searchValue                   
            })
        .then(result => {
            this.studentRec = result;
            })
                       
    } else {
        
        const event = new ShowToastEvent({
            variant: 'error',
            message: 'Search text missing....',
        });
        this.dispatchEvent(event);
    }
}

getSelectedIdAction(event){
    const selectedStudentRecords = event.detail.selectedRows;
    this.selectedStudentRecords=[];
    
    for (let i = 0; i<selectedStudentRecords.length; i++){
        this.selectedStudentIdList.push(selectedStudentRecords[i].Id);
    } 
}

deleteStudentRowAction(){
  deleteMultipleStudentRecord({studObj:this.selectedStudentIdList})
    .then(()=>{
        this.template.querySelector('lightning-datatable').selectedStudentRecords=[];

        const toastEvent = new ShowToastEvent({
            title:'Success!',
            message:'Record(s) deleted successfully',
            variant:'success'
          });
          this.dispatchEvent(toastEvent);

          
    })
    return refreshApex(this.studentRec);
}
 
}

Aura Class -->

public with sharing class lwcStudentSearch {

@AuraEnabled(cacheable=true)    
public static list<Student__c> searchStudent(string searchKey){

    string searchKeyword = '%' + searchKey + '%';
        
    list<Student__c> studentListRecord = new list<Student__c>();
       
        for(Student__c stuObj : [Select Name, Roll_Number__c, Geo_Location__r.Name
                            From Student__c
                            WHERE Name LIKE : searchKeyword]){
           studentListRecord.add(stuObj);
        }
                
        return studentListRecord;
    }


@AuraEnabled
public static List<Student__c> deleteMultipleStudentRecord(List<String> studObj){
    List<Student__c> stuObjItem = new   List<Student__c>();
    List<Student__c> stuObjList = [Select Id, Name  From Student__c Where Id IN:studObj];
    
    for(Student__c con:stuObjList){
        stuObjItem.add(con);
      }
    if(stuObjItem.size()>0){
        try{
            delete stuObjItem;           
          }
        catch (Exception exp) {
            throw new AuraHandledException(exp.getMessage());
        }
      }
      return stuObjItem;
    }
}

I am quite new and learning LWC, please excuse any silly mistakes I have made.

1 Answer 1

0

As stated in the documentation

The refreshApex() function doesn't refresh data that was fetched by calling an Apex method imperatively.

So instead of calling refreshApex() you should just call handleStudentSearch();

deleteStudentRowAction(){
    deleteMultipleStudentRecord({studObj:this.selectedStudentIdList})
    .then(()=>{
        this.template.querySelector('lightning-datatable').selectedStudentRecords=[];

        const toastEvent = new ShowToastEvent({
            title:'Success!',
            message:'Record(s) deleted successfully',
            variant:'success'
        });
        this.dispatchEvent(toastEvent);

        this.handleStudentSearch();
    });
}

Call it in the then callback body ensures handleStudentSearch() would run only after the records deletion.

4
  • I tried what you suggested but it didn't work out either. After deleting the datable was not refreshed.
    – Night Guy
    Commented Apr 3, 2022 at 10:33
  • @NightGuy Do you see the toast message 'Record(s) deleted successfully'? If so, from developer console is there a log for searchStudent method? Do the returned records match with the ones you see in the datatable?
    – RubenDG
    Commented Apr 3, 2022 at 13:08
  • Yes, the toast message is coming up on deletion.
    – Night Guy
    Commented Apr 3, 2022 at 13:10
  • What solution you provided is correct but one vital thing you missed is that "(cacheable=true)" must be omitted from Aura class too in order for it to work. Now the data table refresh is happening just fine.
    – Night Guy
    Commented Apr 11, 2022 at 6:24

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .