0

I have a data table in my lightning component, and for each element of this table I have a checkbox. I'd like that when I make my selection of few element in the table, when I click on a button to validate my selection, I can retrieve my selection (so I can display it in another component for example).

In my component :

<table class="slds-table slds-table--bordered slds-table--cell-buffer">
            <thead>
                <tr class="slds-text-heading--label">
                    <th> </th>
                    <th scope="col" title="Nom">
                        <div class="slds-truncate">Nom</div>
                    </th>
                    <th scope="col" title="Date">
                        <div class="slds-truncate">Date</div>
                    </th>
                    <th scope="col" title="Type">
                        <div class="slds-truncate">Type</div>
                    </th>
                    <th scope="col" title="Description">
                        <div class="slds-truncate">Description</div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <aura:iteration var="a" items="{!v.articles}">
                    <tr>
                        <td class="slds-cell-shrink" data-label="Select Row">
                            <ui:inputCheckbox aura:id="checkbox" label=""/>
                        </td>
                        <td scope="row" data-label="Opportunity Name" title="Nom">
                            <div class="slds-truncate">{!a.Name}</div>
                        </td>
                        <td data-label="Account Name" title="Date">
                            <div class="slds-truncate">{!a.Date__c}</div>
                        </td>
                        <td data-label="Close Date" title="Type">
                            <div class="slds-truncate">{!a.Type__c}</div>
                        </td>
                        <td data-label="Prospecting" title="Description">
                            <div class="slds-truncate">{!a.Description__c}</div>
                        </td>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
       <button class="slds-button slds-button--neutral" press="{!c.onCheck}">Valider</button>

But I don't know how I can retrieve the value of the row that are checked, in the javascript controller, since all my checkboxes are in the aura:iteration and doesn't have an aura:id . I would like to get all the checked checkboxes in a list for example...

EDIT

I tried to write js controller like that :

({
doInit : function(component, event, helper) {
    var action = component.get("c.getArticles");

    action.setCallback(this, function(reponse){
        if(reponse.getState() === "SUCCESS"){
            var repActu = reponse.getReturnValue();

            component.set("v.articles", repActu);
        }
    });

    $A.enqueueAction(action);
},

onCheck : function(component, event, helper){
    var checkboxes = document.getElementsByClassName("checkbox");
    var checkboxesChecked = [];
    for (var i=0; i<checkboxes.length; i++) {
        // And stick the checked ones onto an array...
        if (checkboxes[i].checked) {
            checkboxesChecked.push(checkboxes[i]);
        }
    }
    var action = component.get("this.checkboxesChecked");
    action.setCallback(this, function(reponse){
        if(reponse.getState() === "SUCCESS"){
            var repActu = reponse.getReturnValue();

            component.set("v.checked", repActu);
        }
    });

    $A.enqueueAction(action);

}})

But when I try to get an element by checking its checkbox, I gives me an error in javascript :

[TypeError: Cannot read property 'setCallback' of undefined]

3

I gather that at some point you are pushing an articles array to the view. Before you do that, you could add a boolean checked attribute to each object in the array. Here I am using Array.prototype.forEach:

articles.forEach(function(element){ element.checked = false; });
component.set('v.articles', articles);

Now in your markup you can bind to the checkbox value:

<ui:inputCheckbox aura:id="checkbox" label="" value="{!a.checked}" />

And in your controller it's now easy to fetch a list of only checked objects (here I am using Array.prototype.filter):

var articles = component.get('v.articles');
var checkedArticles = articles.filter(function(obj){ return obj.checked; });

What I don't know is whether Lightning Locker throws up any barriers against adding new properties to JS arrays/objects derived from SObjects.

0

After your ui:inputCheckbox, add a span with data- attributes like this:

 <span data-accName="{!a.name}".../>

Then in your eventhandler for the checkbox change event, grab the values like this:

 var elemId = event.getSource().getElement().id;
 var nextElem = document.getElementById(elemId).nextElementSibling;
 var accName = nextElem.getAttribute('data-accName');
  • Native DOM access by JS is not the best practice to use in Lightning components. The prefered way is via data binding. – vladdihoney Jun 11 '17 at 8:40
  • If I have a list of 500 items displayed and one is selected by the user, I think it is better to get it this way than iterate all 500 to find out which one was selected. – prashanthkr Jun 15 '17 at 22:14

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.