Enable/Disable editing a particular cell on click, based on several permission variables.

[Andres Alvarado]

Hi team, I hope you're doing great.

I came across this example in your documentation for disabling the row's data edition, based on the value of the priority column 

https://ej2.syncfusion.com/react/documentation/treegrid/how-to/disable-editing-for-particular-row-cell

I need to do something more specific, based on several posible scenarios.

As you can see on the attached file, there's a textbox called "Periodo actual". In one of the scenarios, the user should be able to edit the row that matches the "Periodo actual" data only, in this case Jun 2005 (by the way, how can I make the row's data bold if it matches with "Periodo actual"?). In other scenario, based on a parameter, the user should be able to edit the data in the "Valor meta" column, the "Valor real" column or both.

 Thanks a lot for your help.

Andres.

Attachment: GridControl_879fdf3b.zip

[Johnson Soundararajan S]

Hi Andres Alvarado,

Thank you for reaching out to us.

You want to disable editing on certain rows based on the value of a specific column. This requirement can be achieved by implementing a condition to cancel editing within the actionBegin event.

Please refer to the below sample and code snippet for more information.

Code sample :

App.js

 

  const actionBegin = (args) => {

    if (args.requestType === 'beginEdit') {

      if (args.rowData.ShipCountry !== textBoxValue) {

        args.cancel = true;

      }

    }

  };

 

Sample : Kxq1ah (forked) - StackBlitz

Please get back to us, if you need further assistance

Regards,

Johnson Soundararajan S

[Andres Alvarado]

Hi Soundararajan, thanks for the update.  It really helped me out. However, there are some questions left.

Based on your example, I can edit both columns Valor Real and Valor Meta. How can I enable, for that row, that I want to be able to edit either the Valor Meta column or the Valor Real column? 

Thanks in advance.

Andrés

Attachment: 20240425_152721__seiya.mp4_32423c1b.zip

[Aishwarya Rameshbabu]

Hi Andres Alvarado,

Upon reviewing your query, we noticed that you want to enable or disable editing for a particular column(Valor Meta column or the Valor Real column) on a row. To disable editing for a particular column you can set the property column.allowEditing as false. Please refer to the below code example and the sample where we disabled the editing of customer ID and Freight column based on the textbox value.

App.js

 

  const handleTextBoxChange = (event) => {

    setTextBoxValue(event.target.value);

    let col1 = grid.getColumnByField('CustomerID');

    let col2 = grid.getColumnByField('Freight');

    if (event.target.value === 'Germany') {

      col2.allowEditing = false;

      col1.allowEditing = true;

    }

    if (event.target.value === 'Brazil') {

      col1.allowEditing = false;

      col2.allowEditing = true;

    }

  };

 

Sample: https://stackblitz.com/edit/react-aupdw1-3ut8cr?file=App.js,datasource.js

If you need any further assistance or have additional questions, please feel free to let us know.

Regards

Aishwarya R