0

I am developing an aura lightning component which is "called" through a visualforce page.

The functionality consists of two aura lightning components:

  1. Parent aura lightning component: consists of a lightning card in which i have created a table. Within that table another aura lightning component is called (child)

  2. Child aura lightning component: This component is called through the parent component. It consists of information provided by the parent aura lightning component and by pressing a "Search" button a modal pops up which consists of a lightning datatable which is filled in with data retrieved by apex. (part of code below)

         <td class="slds-text-align_right" role="gridcell" >
         </td>
         <th scope="row">
             <div class="slds-truncate" title="OfferMember" >{!v.offerMemberData.offerMember.Name}</div>
         </th>
    
         <c:el_sObjectLookup objectAPIName = "Account"    fieldAPINames = "Name,el_TIN__c" subHeadingFieldsAPI = "el_TIN__c"
                             lookupIcon = "standard:account" placeholder = "Search Account"
                             selectedRecordId= "{!v.currentAccount}"/>
    
    
         <td role="gridcell" >
             <div class="slds-truncate" title="Subscription" ><ui:inputCheckbox aura:id="subscription" name="{!index}" label="" disabled="{!v.disabled}" change="{!c.onSubscrClick}"/></div>
         </td>
         <aura:if isTrue="{!not(empty(v.offerToBeDisplayed))}">
             <td role="gridcell" >
                 <div class="slds-truncate" title="Selected Offer" >{!v.offerToBeDisplayed}</div>
             </td>
             <td role="gridcell">
                 <button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="false" tabindex="0" title="Edit Button">
                     <span class="slds-assistive-text" data-id="{!index}"></span>
                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                     <lightning:button label="Edit" iconName="utility:edit" value="{!index}" name="{!v.offerMemberData.offerMember.Id}" class="{!v.isActiveSubscription}" iconPosition="left" onclick="{!c.handleSearch}"/>  
                     <lightning:button label="Remove" iconName="utility:delete" value="{!index}" name="{!v.offerMemberData.offerMember.Id}" class="{!v.isActiveSubscription}" iconPosition="left" onclick="{!c.handleRemove}"/>
                     <!--onclick="{!c.handleSearch}"-->
                 </button>
             </td>
             <aura:set attribute="else">
    
                 <td role="gridcell">
                     <button class="slds-button slds-button_icon slds-button_icon-border-filled slds-button_icon-x-small" aria-haspopup="false" tabindex="0" title="Search Button">
                         <span class="slds-assistive-text" data-id="{!index}"></span>
                         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                         <lightning:button label="Search" iconName="utility:search" value="{!index}" name="{!v.offerMemberData.offerMember.Id}" class="{!v.isActiveSubscription}" iconPosition="left" onclick="{!c.handleSearch}"/>  
                         <!--onclick="{!c.handleSearch}"-->
                     </button>
                 </td>
             </aura:set>
         </aura:if>
     </tr>
    
    
    
     <!-- Use LARGE modal/Pop-up Box to display Datatable.-->  
     <!--Use aura:if tag to display/hide popup based on isModalOpen value-->  
     <aura:if isTrue="{!v.isModalOpen}">
         <div class="slds-m-around_xx-large" >
             <!-- Modal/Popup Box starts here-->
             <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">
                     <!--loading spinner start-->
                     <div class="slds-is-relative">
                         <aura:if isTrue="{!v.spinner}">
                             <div aura:id="spinnerId" class="slds-spinner_container">
                                 <div class="slds-spinner--brand  slds-spinner slds-spinner--medium slds-is-relative" role="alert">
                                     <span class="slds-assistive-text">Loading</span>
                                     <div class="slds-spinner__dot-a"></div>
                                     <div class="slds-spinner__dot-b"></div>
                                 </div>
                             </div>
                         </aura:if>
                         <!--Loading spinner end-->
    
                         <!-- Modal/Popup Box Header Starts here-->
                         <header class="slds-modal__header">
                             <lightning:buttonIcon iconName="utility:close"
                                                   onclick="{! c.closeModel }"
                                                   alternativeText="close"
                                                   variant="bare-inverse"
                                                   class="slds-modal__close"/>
                             <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Configuration Selection</h2>
                         </header>
                         <!-- Modal/Popup Box Header Ends here-->
    
                         <!--Modal/Popup Box Body Starts here-->
    
                         <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
    
                             <lightning:datatable aura:id="infoTable" columns="{! v.columns }" data="{! v.data }" keyField="Id"  maxRowSelection="1" 
                                                  showRowNumberColumn="false" onrowselection="{!c.configurationSelection}" selectedRows="{!v.selectedRows}" />
                         </div>
                         <!--Modal/Popup Box Body Ends here-->
    
                         <!--Modal/Popup Box Footer Starts here-->
                         <footer class="slds-modal__footer">
                             <lightning:button variant="neutral" label="Cancel" title="Cancel" onclick="{! c.closeModel }"/>
                             <aura:if isTrue="{!not(empty(v.offerToBeDisplayed))}">
                                 <lightning:button variant="neutral" label="Save" title="Save" onclick="{!c.handleEdit}"/> 
                                 <aura:set attribute="else">
                                     <lightning:button variant="neutral" label="Add" title="Add" onclick="{!c.storeSelectedOffer}"/>
                                 </aura:set>
                             </aura:if>
                         </footer>
                         <!--Modal/Popup Box Footer Ends here-->
    
                     </div>  <!-- Close spinner relative -->
                 </div>
             </section>
             <aura:if isTrue="{!v.isModalOpen}">
                 <!-- Grey Background -->
                 <div class="slds-backdrop slds-backdrop_open"></div>
             </aura:if>
         </div>
     </aura:if>
    

ISSUE: I need to preselect a row when the modal which contains the lightning datatable is loaded. I tried to do so like in the above code (sample javascript code)

var action = component.get("c.getAvailableProductConfigurations");
        action.setParams({ offerMemberId : component.get("v.offerMemberData.offerMember.Id"),
                          isActiveSub : component.get("v.isActiveSubscription"),
                          accountId : component.get("v.currentAccount"),
                          basketId : component.get("v.currentBasketId"),
                          bundledOfferId : component.get("v.bundledOfferId")
                         });
        // Create a callback that is executed after the server-side action returns
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                
                var availableConfigs = response.getReturnValue();
                // set the mapList with the value returned from the server
                component.set("v.availableProdConfigurations", availableConfigs);
                component.set("v.spinner", false); //Set Loading Spinner to False
                //alert(JSON.stringify(availableConfigs));
                
                //check if the returned data contain supplyNumber and decide which datatable will be displayed
                for(var i=0; i<availableConfigs.length; i++){
                    if(availableConfigs[i].supplyNumber != null){
                        component.set('v.columns', [
                            {label: 'Offer Name', fieldName: 'configName', type: 'text'},
                            {label: 'Supply Number', fieldName: 'supplyNumber', type: 'text'},
                            {label: 'Installation Address', fieldName: 'installationAddress', type: 'text'},
                            {label: 'Bill Delivery Address', fieldName: 'billDeliveryAddress', type: 'text'}
                        ]); 
                    }
                    else{
                        component.set('v.columns', [
                            {label: 'Offer Name', fieldName: 'configName', type: 'text'}
                        ]);  
                    }
                }
                component.set( 'v.data', availableConfigs ) ;

                //TRY TO PRESELECT OFFERS BUT NO USE
                var selectedRowsIds = []; 
                
                var vData = component.get("v.data");
                alert('first vData is: '+vData[0].configId);
                selectedRowsIds.push(vData[0].configId);
                
                alert('selectedRowsIds: '+selectedRowsIds);
                    
                component.set("v.selectedRows", selectedRowsIds);
                alert('im after set the preselectedRow');
                var getPreselectedRow = component.get("v.selectedRows");
                alert('getPreselectedRow '+getPreselectedRow);
                
            }......

So, basically i am populating a list attribute with an id contained in the specific row (selectedRows) which is defined as value in my lightning datatable in the attribute :selectedRow="{!v.selectedRows}" wihtin the child aura component. I can't make it to work and populate the row i am defining. Any help appreciated.

Thank you.

2
  • 1
    I guess you just need to fix the keyField="Id" set this to configId, keyField="configId", it should work. Commented Apr 2, 2021 at 13:17
  • Really thank you! It worked! Commented Apr 2, 2021 at 13:35

0

You must log in to answer this question.