0

I want to conditionally control the inline editing property of the Quantity column.

Followed many posts Conditionally enable edit in lightning:datatable, https://developer.salesforce.com/forums/?id=9062I000000QxLq and many more but to no avail. Here is my css

.testone{
    pointer-events: none;
    color: #333;
    border: 1px solid #666;
    background: red;
 }

and the Quantity column has the cellAttributes element

        {label: labels.quantity, fieldName: 'Quantity', type: 'number', editable : true,
            cellAttributes: {
                class:{
                    fieldName: 'testone'
                }
            }
        },

and the js code where the items are fed to the data property of the datatable,

            let  items =[];
            this._cached.forEach(item => {
                item.testone = 'testone';

                items.push(item);
            });

the datatable is rendering correctly but the Quantity is always editable when it shouldn't. Any idea where I am going wrong?

I can see the css being applied, see the screenshot below. [![chrome inspector screenshot][1]] [1]: https://i.stack.imgur.com/sQmw8.png

3
  • Shot in the dark as I have not done anything like this; but you have editable : true. Does the space between editable and : matter? Elsewhere you have attribute: (no space before the colon).
    – Moonpie
    Jun 1, 2021 at 21:32
  • Also, in the documentation[1] it shows both editable: true and editable: 'true'. Possibly they are used in different contexts, as I didn't read the fine print. Did you try it with the single quotes? [1] developer.salesforce.com/docs/component-library/bundle/…
    – Moonpie
    Jun 1, 2021 at 21:37
  • @Moonpie I did not think it will change anything. Yes I tried both.
    – Mo Ali
    Jun 2, 2021 at 7:46

2 Answers 2

3

Here's a solution using an attribute for the editable value

You can conditionally edit by doing the following in the LWC datatable:

In your table columns define editable as such

COLUMN = [
{label: 'Quantity, fieldName: 'Quantity__c', type: 'number', sortable: false, editable: {fieldName: 'controlEditField'}]

In your data include the controlling field like

data = {
   Quantity__c: 'Some Value',
   controlEditField: false
}

You can manipulate the controlling field via JS or in your Apex logic.

Please note: You can debug this feature using the Chrome Developer Tools and enabling your Salesforce Sandbox user for Debug Mode. You can then open datatable.js to look under the hood at how this resolves. See the function isCellEditable.

1
  • It was a great help! Thank you Dec 7, 2021 at 8:32
1

ok finally I resolved it, here are the steps

  1. Reference the field in the cellAttributes as in the description above. Follow all the step minus the adding of the project css. We are going to override it with the one from static resources.
  2. Create a static resource file, add the css and upload it to the org
  3. Reference the field, in my case testone in the static resource file.
  4. in the js file add
import { loadStyle } from 'lightning/platformResourceLoader';
import  myResource from '@salesforce/resourceUrl/api name of the static resource';
  1. in your renderedCallback
        if (!this.stylesLoaded) {
            Promise.all([loadStyle(this, myResource)])
                .then(() => {
                    console.log("Custom styles loaded");
                    this.stylesLoaded = true;
                })
                .catch((error) => {
                    console.error("Error loading custom styles");
                });
        }

that is it. screenshot below enter image description here

1
  • Glad you were able to figure it out. Sorry I was clueless.
    – Moonpie
    Jun 2, 2021 at 22:48

You must log in to answer this question.

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