3

I'm using the DataGrid component of Material-UI for displaying a list of items.

I want to make each cell in every row editable and then change the corresponding item of that row.

for that purpose, I'm using the onCellEditCommit property provided on the DataGrid component. But, when I actually change a value of a cell, my event handler doesn't invoke.

I use the following code:

 export default function TargetsView(props) {
      const [items] = useContext(TargetsContext);
      const onItemsEnabled = props.onItemsEnabled;

      return (
        <div style={{ height: 300, width: "100%" }}>
          <DataGrid
            disableSelectionOnClick
            onCellEditCommit={(params) => {
              console.log("test");
            }}
            onSelectionModelChange={
              onItemsEnabled
                ? (selectedRows) => {
                    const targetInformation = [];
                    for (let selectedRow of selectedRows)
                      targetInformation.push(items[selectedRow - 1]);
                      onItemsEnabled(targetInformation);
                  }
                : null
            }
            rows={items}
            columns={columns}
            checkboxSelection
            experimentalFeatures={{ newEditingApi: true }}
          />
        </div>
      );
    }
Idan Krupnik
  • 443
  • 1
  • 6
  • 8

1 Answers1

1

OnCellEditCommit is part of the legacy editing api: https://mui.com/x/react-data-grid/editing-legacy/#events

Your code should not contain the line: experimentalFeatures={{ newEditingApi: true}}

 export default function TargetsView(props) {
      const [items] = useContext(TargetsContext);
      const onItemsEnabled = props.onItemsEnabled;

      return (
        <div style={{ height: 300, width: "100%" }}>
          <DataGrid
            disableSelectionOnClick
            onCellEditCommit={(params) => {
              console.log("test");
            }}
            onSelectionModelChange={
              onItemsEnabled
                ? (selectedRows) => {
                    const targetInformation = [];
                    for (let selectedRow of selectedRows)
                      targetInformation.push(items[selectedRow - 1]);
                      onItemsEnabled(targetInformation);
                  }
                : null
            }
            rows={items}
            columns={columns}
            checkboxSelection
          />
        </div>
      );
    }
cementdriveway
  • 11
  • 2