3

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);}
  • Can you try event.currentTarget.parentNode.parentNode.id to get the Id from tr element? – Ratan Paul Jun 13 '17 at 6:34
  • @RatanPaul I am Getting 'Cannot read property 'parentNode' of undefined ' error. – Ajay Prakash Dubey Jun 13 '17 at 6:52
  • Ajay check my answer hope this will solve your issue. – Ratan Paul Jun 20 '17 at 7:48
2

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);}
1

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);
    }
})
  • 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. – Ajay Prakash Dubey Jun 13 '17 at 11:15
  • What is your requirement? What will you do after getting the row no? – Saroj Bera Jun 13 '17 at 11:35
  • Have to do some calculations based on the input and show the result to user instantly. – Ajay Prakash Dubey Jun 13 '17 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. – Ajay Prakash Dubey Jun 13 '17 at 12:03
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);
    }
})
  • 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. – Ajay Prakash Dubey Jun 20 '17 at 11:23
  • This is throwing an error as Cannot read property 'parentElement' of undefined – Avijit Chakraborty May 11 at 2:19

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.