Apex Code Development You need to sign in to do that
Don't have an account?
ShaikA How to pass Recordid to JS Controller on button click
Hi All,
I have a scenario, where i have a table with list of data along with delete button, need to pass record id once delete button get click.
Compenet:
<aura:iteration items="{!v.lstProducts}" var="p" indexVar="idx">
<tr>
<th class="slds-cell-shrink" scope="col">
<label class="slds-checkbox">
<ui:inputCheckbox aura:id="InputSelect" value="{!p.selected}" change="{!c.onChange}" />
<span class="slds-checkbox--faux"></span>
<span class="slds-assistive-text">Select All</span>
</label>
</th>
<td data-label="Account Name">
<div class="slds-truncate" title="Cloudhub">
<ui:outputText value="{!p.pro.Name}" />
</div>
</td>
<td data-label="Account Name">
<div class="slds-truncate" title="Cloudhub">
<ui:outputText value="{!p.pro.ProductCode}" />
</div>
</td>
<td data-label="Account Name">
<div class="slds-truncate" title="Cloudhub">
<ui:inputText value="{!p.pro.Quantity__c}" />
</div>
</td>
<td data-label="Account Name">
<div class="slds-truncate" title="Cloudhub">
<ui:outputText value="{!p.pro.Description}" />
</div>
</td>
<td>
<div class="slds-form-element">
<div class="slds-card" data-record="{!idx}" >
<ui:button label="Delete" class="slds-button slds-button--brand" aura:id="mylink" press="{!c.deleteProduct}"/>
</div>
</div>
</td>
</tr>
</aura:iteration>
JS Controller:
({
deleteProduct : function(component, event, helper) {
}
})
Thanks in Advance
Shaik
I have a scenario, where i have a table with list of data along with delete button, need to pass record id once delete button get click.
Compenet:
<aura:iteration items="{!v.lstProducts}" var="p" indexVar="idx">
<tr>
<th class="slds-cell-shrink" scope="col">
<label class="slds-checkbox">
<ui:inputCheckbox aura:id="InputSelect" value="{!p.selected}" change="{!c.onChange}" />
<span class="slds-checkbox--faux"></span>
<span class="slds-assistive-text">Select All</span>
</label>
</th>
<td data-label="Account Name">
<div class="slds-truncate" title="Cloudhub">
<ui:outputText value="{!p.pro.Name}" />
</div>
</td>
<td data-label="Account Name">
<div class="slds-truncate" title="Cloudhub">
<ui:outputText value="{!p.pro.ProductCode}" />
</div>
</td>
<td data-label="Account Name">
<div class="slds-truncate" title="Cloudhub">
<ui:inputText value="{!p.pro.Quantity__c}" />
</div>
</td>
<td data-label="Account Name">
<div class="slds-truncate" title="Cloudhub">
<ui:outputText value="{!p.pro.Description}" />
</div>
</td>
<td>
<div class="slds-form-element">
<div class="slds-card" data-record="{!idx}" >
<ui:button label="Delete" class="slds-button slds-button--brand" aura:id="mylink" press="{!c.deleteProduct}"/>
</div>
</div>
</td>
</tr>
</aura:iteration>
JS Controller:
({
deleteProduct : function(component, event, helper) {
}
})
Thanks in Advance
Shaik
Thanks again for your replay, i need to pass only selected records to event attribute, anyhow i have done it.
clickProductInfo : function(component, event, helper) {
var objlist = [];
var selectcheck =false;
var products1 = component.get("v.lstProducts");
var product2;
for(var i=0 ; i< products1.length; i++){
if(products1[i].selected)
{
selectcheck=true;
objlist.push(products1[i].pro); // here "pro" is object in wrapper calss
}
}
if(!selectcheck){
alert('Please select order to process');
} else{
alert('sucess');
console.log("products: " + JSON.stringify(objlist));
var evt = $A.get("e.c:ProductInfoEvent");
evt.setParams({ selectedProductList: objlist});
evt.fire();
}
},
Regards,
Shaik
All Answers
for do this use another component with <th>...</th> part and pass single product on it and where you get single product record for delete :)
Thanks
main component
<aura:component controller="serversideClass" > <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> <aura:attribute name="accountList" type="account[]" /> <table class="slds-table slds-table--bordered slds-table--cell-buffer"> <thead> <tr> <th>Name</th> <th>Phone</th> <th>Id</th> <th>Delete</th> </tr> </thead> <tbody> <aura:iteration items="{!v.accountList}" var="a" > <c:childItrration singleAcc="{!a}"/> </aura:iteration> </tbody> </table> </aura:component>main component controller({ doInit : function(component, event, helper) { var action = component.get("c.fetchaccount"); action.setCallback(this, function(response) { var state = response.getState(); if (state === "SUCCESS") { alert("From server: " + JSON.stringify(response.getReturnValue())); component.set("v.accountList",response.getReturnValue()); } }); $A.enqueueAction(action); } })childItrration component<aura:component controller="serversideClass"> <aura:attribute name="singleAcc" type="account"/> <tr> <td> {!v.singleAcc.Name}" </td> <td> {!v.singleAcc.Phone} </td> <td> {!v.singleAcc.Id} </td> <td> <ui:button label="Delete" class="slds-button slds-button--brand" aura:id="mylink" press="{!c.deleteProduct}"/> </td> </tr> </aura:component>js controller({ deleteProduct : function(component, event, helper) { var currentRecord = component.get("v.singleAcc"); alert('select account--> ' + JSON.stringify(currentRecord)); var action = component.get("c.DeleteAccount"); action.setParams({ "acc" : currentRecord }); action.setCallback(this, function(response) { var state = response.getState(); if (state === "SUCCESS") { alert("From server: Delete account successfull Reload page again you dont see this account "); } }); $A.enqueueAction(action); }, })apex classpublic class serversideClass { @AuraEnabled public static List<account> fetchaccount(){ return [SELECT id,Name,Phone from account]; } @AuraEnabled public static void DeleteAccount(Account acc){ Delete acc; } }i hop it helps youlet me inform if it work for you and mark it best answer :)
Thanks for your reply, please let me know is there any posibility to get only selected records from list of records without checkbox from wrapper and pass to event atrribute.
Event:
<aura:event type="APPLICATION">
<aura:attribute name="selectedProductList" type="Product2[]"/>
</aura:event>
Compenet:
<aura:attribute name="lstProducts" type="ProductListController.productWrapper[]"/>
<aura:iteration items="{!v.lstProducts}" var="p" indexVar="idx">
<tr>
<th class="slds-cell-shrink" scope="col">
<label class="slds-checkbox">
<ui:inputCheckbox aura:id="InputSelect" value="{!p.selected}" />
<span class="slds-checkbox--faux"></span>
<span class="slds-assistive-text">Select All</span>
</label>
</th>
<td data-label="Account Name">
<div class="slds-truncate" title="Cloudhub">
<ui:outputText value="{!p.pro.Name}" />
</div>
</td>
<td data-label="Account Name">
<div class="slds-truncate" title="Cloudhub">
<ui:outputText value="{!p.pro.ProductCode}" />
</div>
</td>
<td data-label="Account Name">
<div class="slds-truncate" title="Cloudhub">
<ui:inputText value="{!p.pro.Quantity__c}" />
</div>
</td>
<td data-label="Account Name">
<div class="slds-truncate" title="Cloudhub">
<ui:outputText value="{!p.pro.Description}" />
</div>
</td>
</tr></aura:iteration>
<div class="slds-form-element">
<ui:button label="Next"
class="slds-button slds-button--brand"
press="{!c.clickProductInfo}"/>
</div>
JS Controller:
clickProductInfo : function(component, event, helper) {
var selectcheck =false;
var products1 = component.get("v.lstProducts"); // "lstProducts" is wrapper class with checkboxes
for(var i=0 ; i< products1.length; i++){
if(products1[i].selected)
{
selectcheck=true;
}
}
if(!selectcheck){
alert('Please select order to process');
}
else
{
var evt = $A.get("e.c:ProductInfoEvent");
evt.setParams({ selectedProductList: products1});
evt.fire();
}
},
if you u have sample code, please share.
Regards,
Shaik
sorry for late reply so how can we select Multiple record for delete without Checkboxes?
can you Please Explain more about your Requirement
Thanks
Thanks again for your replay, i need to pass only selected records to event attribute, anyhow i have done it.
clickProductInfo : function(component, event, helper) {
var objlist = [];
var selectcheck =false;
var products1 = component.get("v.lstProducts");
var product2;
for(var i=0 ; i< products1.length; i++){
if(products1[i].selected)
{
selectcheck=true;
objlist.push(products1[i].pro); // here "pro" is object in wrapper calss
}
}
if(!selectcheck){
alert('Please select order to process');
} else{
alert('sucess');
console.log("products: " + JSON.stringify(objlist));
var evt = $A.get("e.c:ProductInfoEvent");
evt.setParams({ selectedProductList: objlist});
evt.fire();
}
},
Regards,
Shaik