0

Some context on what I am trying to achieve. I am trying to add/attach a resize event to a lightning data table, to capture and save the size of the header columns when it is resized by the user. The data table is in a component which is invoked from a parent component. I tried using the onrender method to attach the event, after reading up online.

Below is the code I am working on. There is a main component which creates another component and embeds in it. I need to add an even listener to the data table in the second component. For this I created a method that gets invoked on render of the second component. My problem is that, on render method is invoked multiple time and this.superAfterRender is throwing an error. To add on my component is not accessible from the on render method. I believe the root issue is on render getting invoked twice. I am new with this and so far from what I have looked up, I dont see any reason y it should. Any help or clue on what to look for is greatly appreciated.

Main Component

    <aura:component>
<aura:if isTrue="{!v.userIsAuthenticated}">    
            {!v.errorMessage}
        <lightning:tabset variant="scoped">
            <lightning:tab label="Cases" iconName="custom:custom22">
                {!v.mainComponent}
            </lightning:tab>
        </lightning:tabset>
</aura:if>
</aura:component>

Helper

showAll: function (component, event, helper) {

        $A.createComponent("ks:View", {"user": component.get("v.user")}, function(newCmp, status, errorMessage) {

            if (component.isValid()) {
                if(status == "ERROR") {
                    console.log('Error creating', errorMessage);
                } 
                component.set("v.mainComponent", newCmp);

            }
        });

ks:View component

<aura:component
                controller="ks.Controller" access="global">

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

    <lightning:datatable
                                                columns="{!v.columns}"
                                                class="slds-scrollable"
                                                data="{!v.all}"
                                                keyField="Id"
                                                hideCheckboxColumn="true"
                                                sortedBy="{!v.sortedBy}"
                                                sortedDirection="{!v.sortedDirection}"
                                                onrowaction="{!c.handleAction}"
                                                onsave="{!c.handleSave}"                                                
                                                onsort="{!c.handleSorting}"
                                                aura:id="id"
                                                id="id"
                                                />

</aura:component>

Controller

onRender : function(cmp, event, helper) {
         var afterRend = this.superAfterRender();


        return afterRend
    },
doInit: function(component, event, helper) {
       // data table gets built here
       // Also a model window is opened here to show select the case
        helper.getCase(component, event, helper); 


    }
2
  • 1
    Hi, and welcome to SFSE! I believe this may be an X-Y Problem. What are you actually trying to achieve? The path you're going down likely is not a solution to whatever feature you're trying to implement, or problem you're trying to solve. Please consider making an edit to focus on the main "X", rather than this probably non-viable solution "Y".
    – sfdcfox
    Commented Aug 24, 2019 at 22:52
  • @sfdcfox thanks for the response. I have added some context as to what I want to achieve. Appreciate the X-Y Problem read up.
    – IS_EV
    Commented Aug 24, 2019 at 23:21

1 Answer 1

0

You already have resize event on which I have given solution in Lighting Data table : Capture header column width when changed.

NOTE:

  • However, you should be using RENDERER component for implementing render functions and not from handler .
  • Also, you should not enter into other component DOM:

DOM Access Containment

It’s an anti-pattern for any component to “reach into” another component, regardless of namespace, because it breaks encapsulation. Lightning Locker only prevents cross-namespace access. Your good judgment should prevent cross-component access within your own namespace as it makes components tightly coupled and more likely to break.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .