reactjs - How to delete a row in Material UI DataGrid and persist to server with processRowUpdate? - Stack Overflow

I'm using a DataGrid with actions (Edit, Delete, etc). I based my code on the example given in the

I'm using a DataGrid with actions (Edit, Delete, etc). I based my code on the example given in the documentation for "Full Featured CRUD":

In the example, when the user clicks on the Edit or Save buttons, SetRowModesModel() is called to change the row mode to GridRowModes.Edit when the Edit button is pressed, and to GridRowModes.View when the Save button is pressed.

const handleEditClick = (id: GridRowId) => () => {
  setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.Edit } });
};

const handleSaveClick = (id: GridRowId) => () => {
  setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } });
};

Setting the mode to GridRowModes.View causes processRowUpdates() to be called, and any server side persistence should happen in there, according to the docs:

But in the "Full Featured CRUD" example, when the delete button is clicked, the selected row is merely deleted from the 'rows' state variable.

const handleDeleteClick = (id: GridRowId) => () => {
  setRows(rows.filter((row) => row.id !== id));
};

This does not cause processRowUpdates() to be called, so it's not possible to use that function to call the server to delete the row.

And yet, in the documentation for processRowUpdates(), it suggests using that callback for deleting a row, if you write a function to determine if the row is being deleted:

<DataGrid
  {...otherProps}
  processRowUpdate={(updatedRow, originalRow) => {
    if (shouldDeleteRow(updatedRow)) {
      return { ...updatedRow, _action: 'delete' };
    }
    return updatedRow;
  }}
/>

How would this scenario even happen, since processRowUpdates() isn't called when the delete button is clicked?

Every other example of deleting a row seems to just delete the row locally, without the server-side persistence.

How can I cause the processRowUpdates() to be triggered, so I can persist the deletion? According to the docs "When the user performs an action to stop editing, the processRowUpdate callback is triggered." The docs say that editing can be stopped by the user input or calling apiRef.current.stopCellEditMode({ id, field }) or apiRef.current.stopRowEditMode

That doesn't work in my case, since we aren't in edit mode to begin with.

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745252431a4618756.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信