Delete Multiple Records -Custom Datatable
Html
<template>
<lightning-card variant="Narrow" title="Delete Multiple Records in Custom Datatable LWC" icon-name="standard:account">
<!-- <lightning-button label="Get Selected Records" onclick={getAllSelectedRecord} variant="brand" slot="actions">
</lightning-button> -->
<lightning-button label="Delete Selected Records" onclick={DeleteSectedRecords} variant="brand" slot="actions">
</lightning-button>
<div class="slds-p-horizontal_small">
<!-- loader -->
<div if:true={showSpinner}>
<lightning-spinner alternative-text="Loading..." variant="brand" class="slds-is-fixed">
</lightning-spinner>
</div>
<!-----/loader------>
<!-- datatable with checkbox -->
<div class="tableHeight slds-scrollable_y">
<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-no-row-hover">
<thead>
<tr class="slds-line-height_reset">
<th class="" scope="col">
<div class="slds-truncate">
<lightning-input onchange={handleAllSelected} type="checkbox"
data-key="allCheckbox">
</lightning-input>
</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Name">Name</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Name">Industry</div>
</th>
<th class="" scope="col">
<div class="slds-truncate" title="Name">Phone</div>
</th>
</tr>
</thead>
<tbody>
<template for:each={accounts} for:item="obj">
<tr key={obj.Id}>
<th scope="col">
<div>
<lightning-input type="checkbox" value={obj.Name} data-id={obj.Id}
data-key="firstColumnCheckbox" onchange={handleCheckboxSelect}
name={obj.Id}>
</lightning-input>
</div>
</th>
<th scope="col">
<div>{obj.Name}</div>
</th>
<th scope="col">
<div>{obj.Industry}</div>
</th>
<th scope="col">
<div>{obj.Phone}</div>
</th>
</tr>
</template>
</tbody>
</table>
</div>
</div>
</lightning-card>
</template>
JS
import { LightningElement, wire, track } from 'lwc';
import getAccounts from '@salesforce/apex/AccountController.getAccountsRecords';
import deleteAccounts from '@salesforce/apex/AccountController.DeleteAccountsRecords';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class LWCCustomDatatableWithCheckbox extends LightningElement {
data = [];
error;
accounts;
@track selectedRecordIds = [];
@track selectedRadioRecord = '';
connectedCallback() {
this.handleLoad();
}
handleLoad() {
getAccounts()
.then(result => {
this.accounts = result;
})
.catch(error => {
this.error = error;
});
}
handleCheckboxSelect(event) {
let selectedRows = this.template.querySelectorAll('lightning-input[data-key="firstColumnCheckbox"]');
let allSelected = true;
selectedRows.forEach(currentItem => {
if (!currentItem.checked && currentItem.type === 'checkbox') {
allSelected = false;
}
});
let selectedRow = this.template.querySelector('lightning-input[data-key="allCheckbox"]');
if (allSelected) {
selectedRow.checked = true;
} else {
selectedRow.checked = false;
}
}
//Select/unselect all rows
handleAllSelected(event) {
let selectedRows = this.template.querySelectorAll('lightning-input[data-key="firstColumnCheckbox"]');
selectedRows.forEach(row => {
if (row.type == 'checkbox') {
row.checked = event.target.checked;
}
});
}
handleSingleCheckboxSelect(event) {
const boxes = this.template.querySelectorAll('lightning-input[data-key="singleSelectColumnCheckbox"]');
boxes.forEach(box => box.checked = event.target.name === box.name);
}
getAllSelectedRecord() {
//first column checkbox selected records
let firstColumnSelectedRecord = [];
let firstColumnCheckboxRows = this.template.querySelectorAll('lightning-input[data-key="firstColumnCheckbox"]');
firstColumnCheckboxRows.forEach(row => {
if (row.type == 'checkbox' && row.checked) {
firstColumnSelectedRecord.push(row.dataset.id);
}
});
this.selectedRecordIds=firstColumnSelectedRecord;
//single selected checkbox record
let selectedRecord = '';
let singleColumnCheckbox = this.template.querySelectorAll('lightning-input[data-key="singleSelectColumnCheckbox"]');
singleColumnCheckbox.forEach(row => {
if (row.type == 'checkbox' && row.checked) {
selectedRecord = row.value;
}
});
let selectedRadioRecord = '';
let selectedRadioRows = this.template.querySelectorAll('lightning-input[data-name="radio"]');
selectedRadioRows.forEach(currentItem => {
if (currentItem.type === 'radio' && currentItem.checked) {
selectedRadioRecord = currentItem.value;
}
})
console.log('this.selectedRecordIds'+this.selectedRecordIds);
console.log('multiple selected Record : ' + JSON.stringify(firstColumnSelectedRecord));
}
DeleteSectedRecords(){
this.getAllSelectedRecord();
console.log('this.selectedRecordIds=='+this.selectedRecordIds);
deleteAccounts({DeleteAccountids:this.selectedRecordIds})
.then(result => {
this.showToast();
this.handleLoad();
})
.catch(error => {
this.error = error;
});
}
showToast() {
const event = new ShowToastEvent({
title: 'Toast message',
message: 'Toast Message',
variant: 'success',
mode: 'dismissable'
});
this.dispatchEvent(event);
}
}
Apex
@AuraEnabled
public static List<Account> getAccountsRecords(){
return [Select Id,Name,Industry,phone from Account where Industry!=Null and Phone!=null limit 10];
}
Comments
Post a Comment