0

I am encountering a strange problem in my lightning:datatable. Whenever a force:refreshView is fired from another tab (and my datatable is off screen), when i come back to the tab of the datatable I see the correct data with refreshed results, but the columns are tight. If the refreshView is fired when the datatable is on the screen, the value are corrected updated and the columns display as normal.

Before refreshView: enter image description here

After refreshView in another tab: enter image description here

My code is pretty straightforward.

component:

<aura:component implements="force:hasRecordId,flexipage:availableForAllPageTypes" access="global" controller="RelatedTicketViewApexController">

<!-- handlers-->
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:handler event="force:refreshView" action="{!c.recordUpdated}" />

<!-- attributes -->
<aura:attribute name="recordId" type="String"/>
<aura:attribute name="caseObj" type="Object" />
<aura:attribute name="recordError" type="String"/>
<aura:attribute name="type" type="String" default=""/>
<aura:attribute name="data" type="Object"/>
<aura:attribute name="columns" type="List"/>
<aura:attribute name="initialRowsNumber" type="Integer" default="15"/>
<aura:attribute name="rowsToLoad" type="Integer" default="20" access="global"/>
<aura:attribute name="totalNumberOfRows" type="Integer" default="300"/>
<aura:attribute name="enableInfiniteLoading" type="Boolean" default="true"/>
<aura:attribute name="rowNumberOffset" type="Integer" default="0"/>
<aura:attribute name="currentCount" type="Integer" default="10"/>
<aura:attribute name="cardTitle" type="String" default="Related Cases" />

<force:recordData aura:id="caseRecord"
                  layoutType="FULL"
                  recordId="{!v.recordId}"
                  fields="Id,ParentId, AccountId, ContactId, Type, SubType__c, Case_Product__c, Activity_Type__c, Priority, Origin, BankAccount__c"
                  targetError="{!v.recordError}"
                  targetFields="{!v.caseObj}"
                  recordUpdated="{!c.recordUpdated}"
                  mode="EDIT"/>



<!-- the container element determine the height of the datatable --> 
<lightning:card>

<div aura:id="container" class="slds-scrollable_y">
    <lightning:datatable
            keyField="id"
            data="{! v.data }"
            rowNumberOffset="0"
            columns="{! v.columns }"
            showRowNumberColumn="true"
            onloadmore="{! c.loadMoreData }"
            enableInfiniteLoading="{! v.enableInfiniteLoading }"
            hideCheckboxColumn="true"/>
{! v.loadMoreStatus }

</div>

Controller:

({
doInit: function (component, event, helper) {
    component.set('v.columns', helper.getColumnDefinitions(component));
},

recordUpdated : function(component, event, helper) {
    var changeType = event.getParams().changeType;
    if (changeType === "CHANGED") { component.find("caseRecord").reloadRecord(); }
    console.log('component caseRecord reloaded');

    helper.getData(component, event);
},

loadMoreData: function (component, event, helper) {
    // loadMoreData logic
}

})

Thank you

EDIT: I add another info. If I later resize the browser windows, the columns return to the correct size auto...

3 Answers 3

0

To prevent the lightning:datatable from resizing, try adding a new CSS property width: 100%; to the enclosing div.

Component:

<div aura:id="container" class="slds-scrollable_y full-width">
    <lightning:datatable
            keyField="id"
            data="{! v.data }"
            rowNumberOffset="0"
            columns="{! v.columns }"
            showRowNumberColumn="true"
            onloadmore="{! c.loadMoreData }"
            enableInfiniteLoading="{! v.enableInfiniteLoading }"
            hideCheckboxColumn="true"/>
{! v.loadMoreStatus }

</div>

CSS:

.THIS .full-width {
    width: 100%;
}
4
  • sorry didn't solve :\. I also tried to add the class to the datatable but the problem remains
    – sfdxdev
    Sep 18, 2019 at 10:33
  • This does not answer why should it even refresh when on another tab Sep 18, 2019 at 10:34
  • because I want that, when I click on a related case (for example 00001084) and I change something (for example I change "Activity" from "Presentazione" to "Chiusura") I want that, when I come back to the original tab, the information in the datatable is updated without the need to refresh the entire page
    – sfdxdev
    Sep 18, 2019 at 10:46
  • I add another info. If I later resize the browser windows, the columns return to the correct size auto...
    – sfdxdev
    Sep 18, 2019 at 12:49
0

The problem is that the refreshView event is propagating outside your tab.

You can try using refreshTab instead of refreshView, it works fine for me.

https://developer.salesforce.com/docs/atlas.en-us.api_console.meta/api_console/sforce_api_console_lightning_refreshTab.htm

0

Please try by using style="width: 100%;" with your lightning-datatable tag. It's working for me. Example :-

enter image description here

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.