CODEWITHSUNDEEP
reactjsmaterial-uimui-x-data-grid
Digvijay Singh
Digvijay Singh

Reputation: 21

How to make column editable false based on some condition in Mui Data Grid

I want to make editing false for score column if there is user enter data in percentage column and vice versa with score column. I followed below example from official MUI Grid example. example followed

enter image description here

I am not able to find any similar example in the docs.

Upvotes: 2

Views: 564

Answers (2)

Elihai Vanunu
Elihai Vanunu

Reputation: 1

You can create handleCellEditStart

const handleCellEditStart: GridEventListener<'cellEditStart'> = (params, event) => {
    if (!params.row.editable) {
      event.defaultMuiPrevented = true; // Prevent editing if the row is not editable
    }
  };

Add that to DataGrid parameters

 <DataGridPro
        onCellEditStart={handleCellEditStart}
...
    ```

Upvotes: 0

Tigran Petrosyan
Tigran Petrosyan

Reputation: 570

Directly you cannot do that, since editable field expects only boolean value. But there is a work around it:

  {
    headerName: 'Age',
    field: 'age',
    type: 'string',
    minWidth: 175,
    editable: true,
    renderEditCell: params => {
      return <TextField disabled={params.row.state !== 'NEW'} />
    }
  },

Consider this example: I can use some value from my row and determine the condition based on it. Works for me

Upvotes: 1

Related Questions