I am developing an aura lightning component which is "called" through a visualforce page.
The functionality consists of two aura lightning components:
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)
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> <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> <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.
keyField="Id"set this toconfigId,keyField="configId", it should work.