[DataGrid] New editing API #3963

m4theushw · 2022-02-16T01:26:21Z

This PR proposes a new API for cell and row editing. To avoid breaking changes, it's only available if experimentalFeatures.enableNewEditingAPI is true. Since we switch hooks, developers can't change which API to use in runtime.

After working a lot with the current API it seems to me that during development the listeners were created before the API methods. This caused weird things like publishing events and also calling other API methods.

mui-x/packages/grid/x-data-grid/src/internals/hooks/features/editRows/useGridCellEditing.ts

Lines 228 to 230 in 3101d8d

    
           apiRef.current.setEditCellValue({ id, field, value: '' }); 
        
           apiRef.current.commitCellChange({ id, field }, event); 
        
           apiRef.current.publishEvent(GridEvents.cellEditStop, params, event);

But these published events also call API methods. Their only purpose is to allow developers to override the default behavior.

mui-x/packages/grid/x-data-grid/src/internals/hooks/features/editRows/useGridCellEditing.ts

Lines 299 to 301 in 3101d8d

    
           const handleCellEditStop = React.useCallback<GridEventListener<GridEvents.cellEditStop>>( 
        
             (params, event) => { 
        
               apiRef.current.setCellMode(params.id, params.field, GridCellModes.View);

This was making the editing hooks a mess to maintain. To fix these problems I took a different direction here. First I created the API methods, then binded them to events. Generic listeners, like cellKeyDown, are dumb now and they will only be used to publish a specific editing event, like cellEditStart. The specific event listeners will also be dumb, only calling a method from the API with the correct params. All the complex logic will be inside the API method.

Methods for the cell editing API

isCellEditable determines if a cell is editable
getCellMode returns if a cell is in edit or view mode
startCellEditMode puts a cell into edit mode
stopCellEditMode puts a cell into view mode and updates the original row with the value stored
setEditCellValue updates the value of a cell

Methods for the row editing API

getRowMode returns if a cell is in edit or view mode
startRowEditMode puts row into edit mode
stopRowEditMode puts a row into view mode and updates the original row with the values stored
setEditCellValue updates the value of a cell

New props

processRowUpdate (name open for discussion) is called when putting a cell/row back to view mode. It's meant to be used to send the new row to the server. Since it's called BEFORE updateRows it allows developers to also pre-process the row that will be saved. If the promise is rejected, then we don't update the row and the row doesn't goes to view mode. Previously, to send the row to the server we taught developers to use the rowEditStop event but this had a problem that it updated the row even when the server threw an error, it was optimistic. Now we use a pessimistic approach, which IHMO is what users want for a CRUD application. See https://marmelab.com/react-admin/CreateEdit.html#undoable

Methods to be removed in v6

setRowMode
- Why? Replaced by startRowEditMode and stopRowEditMode
setCellMode
- Why? Replaced by startCellEditMode and stopCellEditMode
commitRowChange
- Why? Functionality merged into stopRowEditMode
commitCellChange
- Why? Functionality merged into stopCellEditMode

Demo with server-side validation: https://codesandbox.io/s/validateservernamegrid-material-demo-forked-5iflei?file=/demo.tsx

Demo with server-side persistence: https://codesandbox.io/s/celleditserversidepersistence-material-demo-forked-7xcpgg?file=/demo.tsx (it doesn't save if the name is empty)

Demo with row editing, validation and with the default start/stop editing behaviors disabled https://codesandbox.io/s/starteditbuttongrid-material-demo-forked-y84q5e?file=/demo.tsx

The docs will be done in a follow-up PR.

mui-bot · 2022-02-16T01:31:23Z

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	272.8	499.3	419.4	389.3	87.646
Sort 100k rows	ms	452.6	1,025.7	687.1	741.32	186.54
Select 100k rows	ms	117.9	230.8	182.9	175.24	42.8
Deselect 100k rows	ms	90.6	203.2	202.6	153.16	43.813

Generated by 🚫 dangerJS against dd10c21

github-actions · 2022-02-17T15:39:16Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions · 2022-02-24T22:27:34Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

packages/grid/x-data-grid-pro/src/tests/detailPanel.DataGridPro.test.tsx

m4theushw · 2022-02-25T14:04:39Z

packages/grid/x-data-grid/src/internals/components/cell/GridEditSingleSelectCell.tsx

@@ -74,6 +75,10 @@ function GridEditSingleSelectCell(props: GridRenderEditCellParams & Omit<SelectP
    setOpen(false);
    const isValid = await api.setEditCellValue({ id, field, value: event.target.value }, event);

+    if (rootProps.experimentalFeatures?.enableNewEditingAPI) {
+      return;


The edit cell in the current singleSelect column automatically commits the value after selecting an option. This doesn't work well with preProcessEditCellProps because if doing a AJAX validation it freeze the UI while waiting for the server to respond. Now we don't automatically commit the value. The user has to click outside as in any other column.

If preProcessEditCellProps is not being used and/or the desired UX is that once a user has made a MenuItem selection the singleSelect will automatically commit, is there a prescribed method for doing so? Or, is there a workaround to make that happen? Thank you.

Please check https://mui.com/x/react-data-grid/editing/#with-auto-stop

Based on the auto-stop example, my understanding is this cannot be done with the singleSelect column type but rather must be accomplished with a custom column type. While the custom column type may be a Select, it would not be a singleSelect. Thank you.

flaviendelangle

I did not test the behavior yet
Overall, the new API is a lot easier to read.

packages/grid/x-data-grid-pro/src/useDataGridProComponent.tsx

packages/grid/x-data-grid/src/internals/models/api/gridEditingApi.ts

packages/grid/x-data-grid/src/internals/models/params/gridCellParams.ts

github-actions · 2022-03-05T20:24:58Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

alexfauquette

Nothing to add

github-actions · 2022-03-08T14:15:59Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

flaviendelangle · 2022-03-09T11:47:11Z

packages/grid/x-data-grid/src/models/props/DataGridProps.ts

@@ -670,4 +674,11 @@ export interface DataGridPropsWithoutDefaultValue extends CommonProps {
   * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
   */
  experimentalFeatures?: Partial<GridExperimentalFeatures>;
+  /**
+   * Callback called before updating a row with new values in the row and cell editing.


Users not looking at the doc but only at there IDE autocomplete will probably use it without thinking to enable the flag.

Suggested change

* Callback called before updating a row with new values in the row and cell editing.

* Callback called before updating a row with new values in the row and cell editing.

* Only applied if `props.experimentalFeatures.newEditingApi: true`

packages/grid/x-data-grid/src/models/gridEditRowModel.ts

packages/grid/x-data-grid/src/models/params/gridEditCellParams.ts

packages/grid/x-data-grid/src/models/params/gridRowParams.ts

packages/grid/x-data-grid/src/models/params/gridEditCellParams.ts

packages/grid/x-data-grid/src/models/api/gridEditingApi.ts

packages/grid/x-data-grid/src/models/params/gridCellParams.ts

packages/storybook/src/stories/grid-rows.stories.tsx

packages/grid/x-data-grid/src/models/props/DataGridProps.ts

m4theushw · 2022-03-15T15:28:28Z

I merged to fix the conflicts in #4060. You can still suggest changes to the API in #4060

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 17, 2022

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 22, 2022

m4theushw force-pushed the new-editing-api branch from 2b6764a to 2e7f536 Compare February 23, 2022 15:19

m4theushw added component: data grid This is the name of the generic UI component, not the React module! new feature New feature or request feature: Editing Related to the data grid Editing feature labels Feb 24, 2022

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 24, 2022

[DataGrid] New editing API

1b82f63

m4theushw force-pushed the new-editing-api branch from 114e9e0 to 1b82f63 Compare February 25, 2022 12:45

Merge branch 'master' into new-editing-api

e0f964c

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 25, 2022

Fix memory leak

bfc57f6

m4theushw mentioned this pull request Feb 25, 2022

[test] Reduce memory usage to run unit tests #4031

Merged

m4theushw commented Feb 25, 2022

View reviewed changes

Return a value if it updated the row

889cd2d

m4theushw marked this pull request as ready for review February 25, 2022 14:38

m4theushw requested review from flaviendelangle, cherniavskii, alexfauquette, DanailH and joserodolfofreitas February 25, 2022 14:38

Don't change cell/row mode if it has error

950ed15

m4theushw self-assigned this Feb 25, 2022

flaviendelangle mentioned this pull request Feb 28, 2022

[DataGridPro] Pass previous props to preProcessEditCellProps #3763

Closed

2 tasks

flaviendelangle reviewed Feb 28, 2022

View reviewed changes

m4theushw mentioned this pull request Mar 1, 2022

[docs] Document the new editing API #4060

Merged

enableNewEditingAPI -> newEditingApi

550a074

m4theushw added 2 commits March 4, 2022 14:26

Extend GridCellParams

76be9b1

Return 'view' if on cell editing

c66a2cd

m4theushw requested a review from flaviendelangle March 4, 2022 18:12

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 5, 2022

m4theushw added 2 commits March 5, 2022 18:20

Support for Tab

679a40c

Merge branch 'master' into new-editing-api

9eed614

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 7, 2022

m4theushw added 2 commits March 7, 2022 12:42

Fix types

4fbed5c

yarn prettier

3540d57

alexfauquette approved these changes Mar 8, 2022

View reviewed changes

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 8, 2022

flaviendelangle reviewed Mar 9, 2022

View reviewed changes

packages/grid/x-data-grid/src/models/props/DataGridProps.ts Outdated Show resolved Hide resolved

m4theushw added 7 commits March 11, 2022 15:55

Merge branch 'master' into new-editing-api

1b398f6

Type value with any as default

d3167e0

Fix export bug with CSB

17f3bab

cellToMoveFocus -> cellToFocusAfter

ee0b648

Remove originalRow

835c66d

Make reason optional

7ca90ca

yarn docs:api

4dacc49

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 11, 2022

m4theushw requested a review from flaviendelangle March 12, 2022 00:11

Accept value without promise

50b49bf

flaviendelangle approved these changes Mar 15, 2022

View reviewed changes

Merge branch 'master' into new-editing-api

dd10c21

m4theushw merged commit 140f394 into mui:master Mar 15, 2022

m4theushw deleted the new-editing-api branch March 15, 2022 15:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGrid] New editing API #3963

[DataGrid] New editing API #3963

m4theushw commented Feb 16, 2022 •

edited

Loading

mui-bot commented Feb 16, 2022 •

edited

Loading

github-actions bot commented Feb 17, 2022

github-actions bot commented Feb 24, 2022

m4theushw Feb 25, 2022

jamrsim Feb 20, 2023

m4theushw Feb 20, 2023

jamrsim Feb 20, 2023

flaviendelangle left a comment

github-actions bot commented Mar 5, 2022

alexfauquette left a comment

github-actions bot commented Mar 8, 2022

flaviendelangle Mar 9, 2022

m4theushw commented Mar 15, 2022

	apiRef.current.setEditCellValue({ id, field, value: '' });
	apiRef.current.commitCellChange({ id, field }, event);
	apiRef.current.publishEvent(GridEvents.cellEditStop, params, event);

	const handleCellEditStop = React.useCallback<GridEventListener<GridEvents.cellEditStop>>(
	(params, event) => {
	apiRef.current.setCellMode(params.id, params.field, GridCellModes.View);

	* Callback called before updating a row with new values in the row and cell editing.
	* Callback called before updating a row with new values in the row and cell editing.
	* Only applied if `props.experimentalFeatures.newEditingApi: true`

[DataGrid] New editing API #3963

[DataGrid] New editing API #3963

Conversation

m4theushw commented Feb 16, 2022 • edited Loading

Methods for the cell editing API

Methods for the row editing API

New props

Methods to be removed in v6

mui-bot commented Feb 16, 2022 • edited Loading

github-actions bot commented Feb 17, 2022

github-actions bot commented Feb 24, 2022

m4theushw Feb 25, 2022

Choose a reason for hiding this comment

jamrsim Feb 20, 2023

Choose a reason for hiding this comment

m4theushw Feb 20, 2023

Choose a reason for hiding this comment

jamrsim Feb 20, 2023

Choose a reason for hiding this comment

flaviendelangle left a comment

Choose a reason for hiding this comment

github-actions bot commented Mar 5, 2022

alexfauquette left a comment

Choose a reason for hiding this comment

github-actions bot commented Mar 8, 2022

flaviendelangle Mar 9, 2022

Choose a reason for hiding this comment

m4theushw commented Mar 15, 2022

m4theushw commented Feb 16, 2022 •

edited

Loading

mui-bot commented Feb 16, 2022 •

edited

Loading