2

I need more information about the context after triggering a change event. I decided to use data- attributes (that can only be applied to regular html tags). Since I'm using <ui:inputNumber, I can't pass them directly. So I decided to wrap it with a div.

<div data-row="{!cell.rowKey}" data-column="{!cell.columnKey}">
    <ui:inputNumber change="{!c.cellChanged}" value="{!cell.value}" />
</div>
  • I can't use aura:id like suggested here, since I'm in an aura:iteration.
  • For a regular DOM event, I could probably use something like event.target.parentNode, but it is a lightning event, where there is no parent node.
  • I really only need it on a data change, so onmousewhatever won't do the trick.

Can I add the cell it self to the event? Or is there any chance to bubble this change event to the div, fire any other event to the div, or any other way to get the parent node in JS?

  • Do you have different components for columns and rows? If not, you may find that approach helpful. Bubbling occurs between components. If a cell value changes, it will be seen in both the row and in the column array. – crmprogdev Sep 25 '17 at 12:09
  • @crmprogdev Yes I have several objects in the background to handle a table. I know the change will be seen, but I don't want to iterate through the whole table to detect changes, it slows down the page enormously right now. That's why I'm trying to pass more specific information. – Basti Sep 25 '17 at 12:14
  • 1
    In my opinion, don't hesitate to create more lightning components. Even, for only one ui:inputNumber. In your case, if you wrap your input inside a lightning component, you can pass the row and column attribute to this new component. Then, you'll be able to fire en event inside the component and handling it in your parent with the column and row attributes passed as parameters inside the event. – Martin Lezer Sep 25 '17 at 12:18
  • 1
    What you've posted doesn't show enough code to tell us about your components to really answer your question. Is your code from a "grid" component where the actual edits will be made? You may need to componentize this further if you don't want to add more JS or even worse, add a jQuery library. – crmprogdev Sep 25 '17 at 12:20
  • Thanks for your comments, it feels like a good approach to make the cell another component. – Basti Sep 25 '17 at 12:27
2

I came up with a component for the whole cell context, so I have all the information in one scope, that does also exist in my controller. This way I had the chance to easily fire my own event and add the data to its params. Thanks Martin Lezer and crmprogdev for your comments!

<aura:component >
    <aura:attribute name="cell" type="Object" />

    <aura:registerEvent name="cellChange" type="c:strike_evt" />

    <td>
        <ui:inputNumber change="{!c.cellChanged}" value="{!cell.value}" />
    </td>
</aura:component>

Controller:

cellChanged: function(cmp, evt, helper) {
    cmp.getEvent("cellChange")
            .setParams({ data: cmp.get("v.cell") })
            .fire();
},

fyi. c:strike_evt is a custom event that is part of the strike components containing a param called data of type Object.

In my main page it's easily hadled like this:

<aura:handler name="cellChange" event="c:strike_evt" action="{!c.cellChanged}" />

Controller:

cellChanged: function(cmp, evt, helper) {
    var rowKey = evt.getParam("data").rowKey;
    var columnKey = evt.getParam("data").columnKey;

    // do stuff
},

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.