Enable or disable edit of cell based on a column value

Hello,

in a row, when selecting a checkbox "SparePart", 

if SparePart === true,

ColA,ColB must be enabled for edit

otherwise not.

How to do that ?

Thanks for info.

best regards

Massimo


2 Replies

MM Massimo Magris October 8, 2024 07:22 AM UTC

There is a nicer/simpler solution than this?

thanks, regards


======================

document.addEventListener('click', function (event) {

    // Get the element that was clicked

    const clickedElement = event.target;


    // Check if the clicked element's ID is 'GridDistinteChild___Ricambio' and is a checkbox

    if (clickedElement.id === 'GridDistinteChild___Ricambio' && clickedElement.type === 'checkbox') {

        const checkboxValue = clickedElement.checked; // true if checked, false if not checked

        console.log(`Checkbox is ${checkboxValue ? 'checked' : 'unchecked'}`);


        // Array of IDs to toggle the class

        const relatedInputs = [

            'GridDistinteRicambioLivCriticita',

            'GridDistinteRicambioConsumabile',

            'GridDistinteRicambioQtaConsigliata'

        ];


        // Loop through each related input and toggle classes

        relatedInputs.forEach(id => {

            const parentElement = document.querySelector(`#${id}`).parentNode;

            parentElement.classList.toggle('e-disabled', !checkboxValue);

            parentElement.classList.toggle('e-enabled', checkboxValue);

        });

    }

});



DM Dineshnarasimman Muthu Syncfusion Team October 9, 2024 11:40 AM UTC

Hi,


We have reviewed your query regarding disabling editing in a particular column based on the value of another column. We suggest using the grid's cellEdit event to cancel the action based on the rowData values. A code snippet is attached for your reference.


<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" toolbar="@(new List<string>() { "Edit", "Cancel", "Update" })" cellEdit="cellEdit">
    <e-grid-editsettings allowEditing="true" mode="Batch"></e-grid-editsettings>

 

 

 

function cellEdit(args) {

  if (args.type === 'edit') {

    if (

      !args.rowData.Verified &&

      (args.columnName === 'CustomerID' || args.columnName === 'ShipCountry')

    ) {

      args.cancel = true;

    }

  }

}

 


We have already discussed this in our UG documentation. We have attached the documentation link for your reference.


Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/how-to/disable-editing-for-particular-row-cell


If this didn't meet your requirement, please ensure the type of editing you are using in your application.


Regards,

Dineshnarasimman M


Loader.
Up arrow icon