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

Improve this question

2 Answers 2

Reset to default
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.

Improve this answer
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; }); Commented Jun 13, 2022 at 7:09
  • ok. Then you need to pass the "item.isDisabledButton" value in the disabled attribute of the buttons Commented Jun 13, 2022 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 Commented Jun 13, 2022 at 7:25
  • can you share what changes you made ? Ideally this is the best way to achieve selective targeting of the rows Commented Jun 13, 2022 at 7:43
  • in HTML I have added disabled={item.isDisabledButton} Commented Jun 13, 2022 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.
Improve this answer
1
  • awesome that you figured out how to implement it. If my answer/comment helped, kindly upvote it :) Commented Jun 21, 2022 at 4:40

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.