0

[![enter image description here][1]][1]I have a situation in LWC. In a table there are multiple records coming dynamically with selection of available dropdowns. Each row has Approve and Reject button functionality. I have managed Approve and Reject by a custom field. Here after Approval/Rejection I want to disable buttons for selected approved row only. But because of same disable attribute it disables approve/reject buttons for all unselected rows - that I don't want. I want button disable for only selected row.. Disable attribute in Lightning button for approve/reject is same. disable=(isDisabledButton). How could I achieve this scenario?

HTML CODE

<template for:each={materialMap} for:item="item">
    <tr class="slds-hint-parent" key={item.id}>
        <td class="slds-cell-wrap" scope="col" >
            <div class="slds-truncate slds-cell-wrap">
                {item.materialName__c}
            </div>
        </td>
        <td class="slds-cell-wrap" scope="row">
            <div class="slds-truncate slds-cell-wrap">
                {item.avgCount}
            </div>
        </td>
        <td class="slds-cell-wrap" scope="row">
            <div class="slds-truncate slds-cell-wrap">
                {item.totalValue}
            </div>
        </td>
        <td class="slds-cell-wrap" scope="row">
            <div class="slds-truncate slds-cell-wrap">
                {item.discountedValue}
            </div>
        </td>
        <td if:true={showApproveRejectbutton} class="slds-cell-wrap" scope="row">
            <div class="slds-truncate slds-cell-wrap">
                <lightning-button variant="success" name={item.materialName__c} label="Approve" title="Successful action" onclick={handleApproval} class="slds-m-left_x-small" disabled={isDisabledButton}>
                </lightning-button>
            </div>
        </td>
        <td if:true={showApproveRejectbutton} class="slds-cell-wrap" scope="row">
            <div class="slds-truncate slds-cell-wrap">
                <lightning-button variant="destructive" name={item.materialName__c} label="Reject" title="Destructive action" onclick={handleApproval} class="slds-m-left_x-small" disabled={isDisabledButton}>
                </lightning-button>
            </div>
        </td>
    </tr>
</template>

JS

handleApproval(event){              
    const actionButton = event.target.name;
    let selectedButton= event.currentTarget.name; 
    console.log('selectedButton '+selectedButton);
    let objIndx = this.materialMap.findIndex((item => item.materialName__c== selectedButton));
    console.log('objIndx== '+objIndx);
    let buttonvalue= this.materialMap[objIndx].isDisabledButton=true;
    console.log('Name of buttonvalue  = '+JSON.stringify(buttonvalue));
}

For this

console.log('Name of buttonvalue = '+JSON.stringify(buttonvalue));

I am getting true value but it is not disabling the buttonenter image description here

2 Answers 2

0

welcome to the community.

In your question you have also pointed out the flaw in this approach "Disable attribute in lightning button for approve/reject is same".

To achieve this, I would suggest having "disabled" attribute as part of the Data on which you are iterating, so that you can use "item.disabled" instead of the current boolean (isDisabledButton).

when you select something, in the change handler just update the disabled to true for that item in your js file.

13
  • Hii Prabuddh Kumar thank for replying.. I hv already added isDisabledButton in Array this.materialMap= []; this.totalValues.forEach(element1 => { this.materialMap= [...this.materialMap, {}]; this.materialMap[this.materialMap.length - 1]['key'] =this.materialMap.length - 1; this.materialMap[this.materialMap.length - 1]['materialName__c'] = element1.materialName__c; this.materialMap[this.materialMap.length - 1]['avgCount'] =element1.avgCount; this.materialMap[this.materialMap.length - 1]['isDisabledButton'] = this.isDisabledButton; }); Jun 13 at 7:09
  • ok. Then you need to pass the "item.isDisabledButton" value in the disabled attribute of the buttons Jun 13 at 7:15
  • did but not worked.. is there any other way to target that row button only...actually this array totalValues is coming from Aggregated Query Jun 13 at 7:25
  • can you share what changes you made ? Ideally this is the best way to achieve selective targeting of the rows Jun 13 at 7:43
  • in HTML I have added disabled={item.isDisabledButton} Jun 13 at 9:38
0
 this.materialMap= []; 
 this.totalValues.forEach(element1 => { 
 this.materialMap= [...this.materialMap, {}]; 
 this.materialMap[this.materialMap.length - 1]['key']=this.materialMap.length-1; 
 this.materialMap[this.materialMap.length - 1]['materialName__c'] = element1.materialName__c; 
 this.materialMap[this.materialMap.length - 1]['avgCount'] =element1.avgCount; 
 this.materialMap[this.materialMap.length - 1]['isDisabledButton'] = this.isDisabledButton; });

 JS
 handleApproval(event){              
 const actionButton = event.target.name;
 let selectedButton= event.currentTarget.name; 
 console.log('selectedButton '+selectedButton);
 let objIndx = this.materialMap.findIndex((item => item.materialName__c== selectedButton));
 console.log('objIndx== '+objIndx);
 let buttonvalue= this.materialMap[objIndx].isDisabledButton=true;
 console.log('Name of buttonvalue  = '+JSON.stringify(buttonvalue));
 }
  In above code every thing is fine.. I missed to make materialMap[] reactive..I have defined it as @track materialMap[]; its working.. 
Thanks @prabuddh kumar for your suggestion about disable attribute item.isDisabledButton.
1
  • awesome that you figured out how to implement it. If my answer/comment helped, kindly upvote it :) Jun 21 at 4:40

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.