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?

Improve this question
7
  • 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
    Commented Sep 25, 2017 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.
    – itsmebasti
    Commented Sep 25, 2017 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
    Commented Sep 25, 2017 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
    Commented Sep 25, 2017 at 12:20
  • Thanks for your comments, it feels like a good approach to make the cell another component.
    – itsmebasti
    Commented Sep 25, 2017 at 12:27

1 Answer 1

Reset to default
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
},
Improve this answer

You must log in to answer this question.

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