March 12, 2020

How to get the count of selected row in lightning:datatable in Salesforce?

Sample Code:

Component:

  1. <aura:component implements="force:appHostable" controller="AccountListController">  
  2.       
  3.     <aura:attribute type="Account[]" name="acctList"/>  
  4.     <aura:attribute name="mycolumns" type="List"/>  
  5.     <aura:attribute name="selectedAccts" type="List"/>  
  6.       
  7.     <aura:handler name="init" value="{!this}" action="{!c.init}"/>  
  8.       
  9.     <div class="slds-box slds-theme_default">  
  10.           
  11.         <lightning:datatable data="{! v.acctList }"   
  12.                              columns="{! v.mycolumns }"   
  13.                              keyField="id"  
  14.                              onrowselection="{!c.handleSelect}"/>  
  15.         <br/>  
  16.         <center>  
  17.             <lightning:button onclick="{!c.showSelectedName}" label="Alert Size" variant="brand"/>  
  18.         </center>  
  19.           
  20.     </div>  
  21.       
  22. </aura:component> 

JS Controller:

  1. ({  
  2.       
  3.     init : function( component, event, helper ) {  
  4.           
  5.         component.set('v.mycolumns', [  
  6.             {label: 'Account Name', fieldName: 'linkName', type: 'url',   
  7.             typeAttributes: {label: { fieldName: 'Name' }, target: '_blank'}},  
  8.             {label: 'Industry', fieldName: 'Industry', type: 'text'},  
  9.             {label: 'Type', fieldName: 'Type', type: 'Text'}  
  10.         ]);  
  11.           
  12.         helper.fetchAccounts( component, event );  
  13.           
  14.     },  
  15.       
  16.     handleSelect : function( component, event, helper ) {  
  17.           
  18.         var selectedRows = event.getParam( 'selectedRows' );   
  19.         var setRows = [];  
  20.         for ( var i = 0; i < selectedRows.length; i++ ) {  
  21.               
  22.             setRows.push( selectedRows[ i ] );  
  23.   
  24.         }  
  25.         component.set( "v.selectedAccts", setRows );  
  26.           
  27.     },  
  28.       
  29.     showSelectedName : function( component, event, helper ) {  
  30.           
  31.         var records = component.get( "v.selectedAccts" );  
  32.         alert( records.length );  
  33.           
  34.     }  
  35.   
  36. }) 

JS Helper:

  1. ({  
  2.       
  3.  fetchAccounts : function(component, event) {  
  4.     
  5.         var action = component.get("c.fetchAccts");  
  6.           
  7.         action.setCallback(this, function(response) {  
  8.               
  9.             var state = response.getState();  
  10.               
  11.             if (state === "SUCCESS") {  
  12.                   
  13.                 var records = response.getReturnValue();  
  14.                 records.forEach(function(record) {  
  15.                       
  16.                     record.linkName = '/' + record.Id;  
  17.                     record.CheckBool = false;  
  18.                       
  19.                 });     
  20.                   
  21.                 component.set("v.acctList", records);  
  22.                   
  23.             }              
  24.               
  25.         });  
  26.           
  27.         $A.enqueueAction(action);  
  28.           
  29.  }  
  30.       
  31. }) 

Apex Class:

  1. public class AccountListController {  
  2.       
  3.     @AuraEnabled  
  4.     public static List < Account > fetchAccts() {  
  5.           
  6.         return [ SELECT Id, Name, Industry, Type FROM Account LIMIT 5 ];  
  7.           
  8.     }  
  9.       

Output:



No comments:

Post a Comment