0

I want to show the lightning datatable in modal and when user will scroll it will show more records after the spinner. I don't want to call server side controller every time so i tried to implement using client side controller. It is working perfectly in one.app however not in quickaction modal.

Component :

<aura:attribute name="spinner" type="Boolean" default="false" />
<aura:attribute name="columns" type="List"/>
<aura:attribute name="customerDataList" type="Account[]"/>
<aura:attribute name="customerCurrentPageData" type="Account[]"/>
<aura:attribute name="totalRecords" type="integer" default="0"/>
<aura:attribute name="totalRecordsToDisplay" type="integer" default="5"/>
<aura:attribute name="loadMoreOffset" type="integer" default="1"/>
<aura:attribute name="showNoRecordMessage" type="Boolean" default="false" />
    <aura:attribute name="flagRecordsDisplay" type="Boolean" default="true" />

<aura:handler name="init" value="{!this}" action="{!c.doInit}" />


<!--Header Code START-->
<div class="HeaderBox">
    <span class="slds-icon_container" title="D And B Customers">
        <lightning:icon iconName="standard:entity" size="large" />
        <h1 style="font-size:20px;float:right;margin-left:10px">Search Customers And Products</h1><br/>
        <span class="slds-assistive-text">D And B Customers</span>
    </span>
</div>
<!--Header Code End-->

<div class="BodyCss slds-theme_default">
    <!--If No Records Found Code START-->
    <aura:if isTrue="{!v.showNoRecordMessage}">
        <span class="slds-text-heading_large slds-text-align_center slds-text-color_error">
            <h1 style="margin-top:30px">No Customers Found</h1>
        </span>
    <!--If No Records Found Code End-->
    <!--Show Table with Records Code START-->
    <aura:set attribute="else">
        <lightning:accordion>
            <lightning:accordionSection name="SectionA" label="Find Our Customers">
                <aura:set attribute="body">
                    <div style="height: 210px">
                        <lightning:datatable columns="{!v.columns}"
                             data="{! v.customerCurrentPageData}"
                             keyField="Name"
                             enableInfiniteLoading="true"
                             loadMoreOffset="{! v.loadMoreOffset }"
                             isLoading="false"
                             onloadmore="{! c.loadMore }"
                             maxRowSelection="1"
                        />
                        <aura:if isTrue="{!v.spinner}">
                            <div aura:id="spinnerId" class="slds-spinner_container">
                                <div class="slds-spinner--brand  slds-spinner slds-spinner--large 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>
                    </div>
                </aura:set>
            </lightning:accordionSection>
        </lightning:accordion>
    </aura:set>
    </aura:if>
    <!--Show Table with Records Code Ends-->
</div>

Here is my controller:

({
    doInit: function(component, event, helper) {
        var action = component.get("c.fetchDataAccountRecords");
        action.setCallback(this, function(result) {
            var state = result.getState();
            if (component.isValid() && state === "SUCCESS"){
                var resultData = result.getReturnValue();
                if(resultData.length > 0){
                    component.set('v.columns', [
                    {label: 'id', fieldName: 'id', type: 'text', sortable : false},
                    {label: 'Name', fieldName: 'Name', type: 'text', sortable : true},
                    ]);
                    component.set("v.customerDataList", resultData);
                    component.set("v.totalRecords", resultData.length); 
                    var totalRecordsToDisplayVar = component.get("v.totalRecordsToDisplay");
                    var customerCurrentDataListVar = [];                     
                    for(var i=0; i<totalRecordsToDisplayVar; i++){
                        customerCurrentDataListVar.push(resultData[i]);
                    }
                    component.set("v.customerCurrentPageData", customerCurrentDataListVar);
                }
                else{
                     component.set("v.showNoRecordMessage", true);
                }
        }
        });
    $A.enqueueAction(action);
    },
    loadMore: function(component, event, helper) {
        var customerDataListVar = component.get("v.customerDataList");
        if(customerDataListVar.length > 0){
             var currentPageData = component.get("v.customerCurrentPageData");
             var lengthOfRecords = component.get("v.customerCurrentPageData").length;
             var totalRecordsToDisplayVar = component.get("v.totalRecordsToDisplay");
             component.set("v.spinner",true);
             var customerCurrentDataListVar = []; 
             for(var i=lengthOfRecords; i< lengthOfRecords + totalRecordsToDisplayVar; i++){
                    if(customerDataListVar[i] != undefined){
                        customerCurrentDataListVar.push(customerDataListVar[i]);
                    }
             }
             var concatData = currentPageData.concat(customerCurrentDataListVar);
             setTimeout(function(){
             component.set("v.spinner",false)
             component.set("v.customerCurrentPageData",concatData);
             event.getSource().set("v.isLoading", false);
             }, 1000);



        }
    }
})
  • What isn't happening when you view it in the modal? – Shane Steinfeld Oct 3 '18 at 21:36
  • It just stops on Spinner initially only. I am not able to select any record. – Sukruti Oct 3 '18 at 21:37
  • BTW, calling a server-side controller works surprisingly well. I was shocked the first time I tried. It was performing just fine on a weak 4G connection too. Might be worth considering for a faster initial page load. – Shane Steinfeld Oct 3 '18 at 21:38
  • The records i am getting here will be replaced by the records coming from integration. So i cant do that. – Sukruti Oct 3 '18 at 21:39
  • Got'cha. So it's just that you can't select a row. Is the onloadmore action firing? – Shane Steinfeld Oct 3 '18 at 21:41
0

Okay, based on your comments about the infinite load firing recursively (infinitely?!), I have a feeling that it has to do with where the table is positioned on the page when it's in the modal.

When the table is outside the modal, it's position is relative to its containing element. The table height is, in this case, 210px. When the page scrolls down to 210px minus the height of the loadMoreOffset, it fires the loadMore function.

When the table is inside the modal, its position is modified; it's not displaying where it appears in the DOM. It's (likely) reading its position as being within the "hot zone" -- the table height minus the offset -- and so it keeps firing the loadMore function.

You can try setting the container div's position to absolute, but I don't think that's going to play nice with the modal. :(

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.