4

I have a requirement where I am creating table row dynamically. I have to call javascript controller method from dynamically created ui:inputText using change="{!c.calculateCostAndPrice}" attribute. I need the current row Index from where method is being invoked. I have used aura-id to get the index but it works only for single row because, for multiple rows, aura-id will not be unique.

Component code-

<aura:iteration items="{!v.PhaseLineItemWrapper}" var="item" indexVar="index">
<table class="slds-table slds-table--bordered slds-accordian-sec" role="grid">
<tr class="slds-hint-parent" id ="{!index}">
    <td scope="row">
        <ui:inputText placeholder="Quantity"  value="{!item.QuantityOfItem}" class="slds-input" change="{!c.calculateCostAndPrice}" > 
    </td>
</tr> 
</table>

Controller method-

calculateCostAndPrice : function(component,event,helper){
   var resultCmp = component.find("thisInput").get("v.value");
   console.log("resultCmp:::"+resultCmp);}
3
  • Can you try event.currentTarget.parentNode.parentNode.id to get the Id from tr element?
    – Ratan Paul
    Jun 13, 2017 at 6:34
  • @RatanPaul I am Getting 'Cannot read property 'parentNode' of undefined ' error. Jun 13, 2017 at 6:52
  • Ajay check my answer hope this will solve your issue.
    – Ratan Paul
    Jun 20, 2017 at 7:48

3 Answers 3

4

I believe, as of now it is not possible with ui:inputText. As a workaround, you can use HTML input element with a custom HTML data-* Attribute.

Component:

<aura:component>
    <table class="slds-table slds-table--bordered slds-accordian-sec" role="grid">
        <aura:iteration items="1,2,3,4,5" var="item" indexVar="index">            
            <tr class="slds-hint-parent" id ="{!index}">
                <td scope="row"> 
                    <input data-row-index="{!index}" onchange="{!c.calculateCostAndPrice}" type="text" placeholder="Quantity"  value="{!item.QuantityOfItem}" class="slds-input" />
                </td>
            </tr> 
        </aura:iteration>
    </table>
</aura:component>

Controller:

({
    calculateCostAndPrice : function(component, event, helper) {
        var target = event.target;
        var rowIndex = target.getAttribute("data-row-index");
        console.log("Row No : " + rowIndex);
    }
})
4
  • I had tried html input text earlier but it does not bind the input value with the wrapper list .That's why I am trying with UI input text. Jun 13, 2017 at 11:15
  • What is your requirement? What will you do after getting the row no?
    – Saroj Bera
    Jun 13, 2017 at 11:35
  • Have to do some calculations based on the input and show the result to user instantly. Jun 13, 2017 at 11:47
  • After calculating the values I want to set the row on the same index in the wrapper with the calculated values ,where it was earlier. Jun 13, 2017 at 12:03
3

I have found an alternate solution for my problem. I can get index from the label attribute of ui:inputText.

<aura:iteration items="{!v.PhaseLineItemWrapper}" var="item" indexVar="index">
<table class="slds-table slds-table--bordered slds-accordian-sec" role="grid">
    <tr class="slds-hint-parent" id="{!index}">
        <td scope="row">
            <ui:inputText placeholder="Quantity" label="{!index}" value="{!item.QuantityOfItem}" class="slds-input" change="{!c.calculateCostAndPrice}">
        </td>
    </tr>
</table>

Controller-

calculateCostAndPrice: function(component, event, helper) {
var indexvar = event.getSource().get("v.label");
console.log("indexvar:::" + indexvar);}
0

So basically I suggest you to use event.currentTarget.parentElement.parentElement.id to get the id

<tr class="slds-hint-parent" id ="{!index}">
    <td scope="row" >
        <ui:inputText placeholder="Quantity"  value="{!item.QuantityOfItem}" 
                                 class="slds-input" change="{!c.calculateCostAndPrice}" > 
    </td>
</tr> 

And Now In controller JS

Use

({
    calculateCostAndPrice : function(component, event, helper) {
        var rowIndex = event.currentTarget.parentElement.parentElement.id ;
        console.log("Row No : " + rowIndex);
    }
})
2
  • I am still getting error "Cannot read property 'parentElement' of undefined" . But I have found alternate solution for this. I am able to get the index from label attribute of ui:inputText. Jun 20, 2017 at 11:23
  • This is throwing an error as Cannot read property 'parentElement' of undefined May 11, 2019 at 2:19

You must log in to answer this question.

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