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...

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%;
}
| improve this answer | |
  • sorry didn't solve :\. I also tried to add the class to the datatable but the problem remains – sfdxdev Sep 18 '19 at 10:33
  • This does not answer why should it even refresh when on another tab – salesforce-sas Sep 18 '19 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 '19 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 '19 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

| improve this answer | |
0

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

enter image description here

| 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.