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]

2 Answers 2

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');
2
  • Native DOM access by JS is not the best practice to use in Lightning components. The prefered way is via data binding. Jun 11, 2017 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. Jun 15, 2017 at 22:14

You must log in to answer this question.

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