Play Games

Search This Blog

Thursday, June 17, 2021

How to process selected rows of lightning data table LWC Salesforce. - Salesforce Globe For You

 How to process selected rows of lightning data table LWC Salesforce.  - Salesforce Globe For You 

Solution:use getSelectedRows() to get the selected rows of lightning data table.

Example

displayLightningDataTableLWC.html

<template>

    <lightning-Card title="Process Lightning Data Table Data">

        <div>

            <lightning-datatable

                    key-field="id"

                    data={lstLeads}

                    columns={columns}>

            </lightning-datatable>

        </div> 

        <div style="padding-top: 10;">  

            <lightning-button variant="brand" label="Get Selected Records" title="Process Lightning Data Table Data" 

            onclick={getSelectedRec} class="slds-m-left_x-small"></lightning-button>

        </div>

        <div title="Selected Leads">

            <lightning-Card title="Selected Leads are">

            <lightning-datatable

                    key-field="id"

                    data={lstSelectedLeads}

                    columns={columns}>

            </lightning-datatable>

        </lightning-Card>

        </div> 

    </lightning-Card>

</template>

displayLightningDataTableLWC.js

import { LightningElement,track } from 'lwc';

import getLeads from '@salesforce/apex/LeadController.getLeads';

const columns = [

    { label: 'Id', fieldName: 'Id' },

    { label: 'Name', fieldName: 'Name'}

];

export default class DisplayLightningDataTableLWC extends LightningElement {

    @track lstLeads;

    @track lstSelectedLeads;

    columns = columns;

    async connectedCallback() {

        getLeads()

            .then(result => {

                this.lstLeads = result;

            })

            .catch(error => {

                this.error = error;

            });

    }

    getSelectedRec() {

        var selectedRecords =  

      this.template.querySelector("lightning-datatable").getSelectedRows();  

      console.log('selectedRecords are ',selectedRecords);

      this.lstSelectedLeads = selectedRecords;

    }

}

displayLightningDataTableLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>51.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

Output:



No comments:

Post a Comment