You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: docs/data/data-grid/editing/editing.md
+9-9
Original file line number
Diff line number
Diff line change
@@ -162,7 +162,7 @@ The callback is called with three arguments:
162
162
3. An object with additional properties such as `rowId`.
163
163
164
164
Please note that the `processRowUpdate` must return the row object to update the Data Grid internal state.
165
-
The value returned is used later as an argument on a call to `apiRef.current.updateRows`.
165
+
The value returned is used later as an argument on a call to `apiRef.current.updateRows()`.
166
166
167
167
```tsx
168
168
<DataGrid
@@ -176,7 +176,7 @@ The value returned is used later as an argument on a call to `apiRef.current.upd
176
176
```
177
177
178
178
If you want to delete a row from the internal state of the Data Grid, you can return an additional property `_action: 'delete'` in the row object from the `processRowUpdate` callback. This will remove the row from the internal state of the Data Grid.
179
-
It is a more performant way to delete a row as compared to updating the [`rows` prop](/x/react-data-grid/row-updates/#the-rows-prop) or using `setRows` API method because `processRowUpdate` uses the [`updateRows`](https://mui.com/x/react-data-grid/row-updates/#the-updaterows-method) under the hood which doesn't cause a full regeneration of the row tree.
179
+
It is a more performant way to delete a row as compared to updating the [`rows` prop](/x/react-data-grid/row-updates/#the-rows-prop) or using `setRows()` API method because `processRowUpdate` uses the [`updateRows()`](https://mui.com/x/react-data-grid/row-updates/#the-updaterows-method) under the hood which doesn't cause a full regeneration of the row tree.
180
180
181
181
```tsx
182
182
<DataGrid
@@ -378,7 +378,7 @@ These are the most important params to consider:
378
378
-`isProcessingProps`: whether `preProcessEditCellProps` is being executed or not
379
379
380
380
Once a new value is entered into the input, it must be sent to the Data Grid.
381
-
To do this, pass the row ID, the column field, and the new cell value to a call to `apiRef.current.setEditCellValue`.
381
+
To do this, pass the row ID, the column field, and the new cell value to a call to `apiRef.current.setEditCellValue()`.
382
382
The new value will be parsed and validated, and the `value` prop will reflect the changes in the next render.
383
383
384
384
It's important to also handle the [accessibility](/x/react-data-grid/accessibility/) of custom edit components.
@@ -413,17 +413,17 @@ The following demo implements a custom edit component, based on the [`Rating`](h
413
413
414
414
### With debounce
415
415
416
-
By default, each call to `apiRef.current.setEditCellValue` triggers a new render.
416
+
By default, each call to `apiRef.current.setEditCellValue()` triggers a new render.
417
417
If the edit component requires the user to type a new value, re-rendering the Data Grid too often will drastically reduce performance.
418
418
One way to avoid this is to debounce the API calls.
419
-
You can use `apiRef.current.setEditCellValue` to handle debouncing by setting the `debounceMs` param to a positive integer that defines a set time period in milliseconds.
419
+
You can use `apiRef.current.setEditCellValue()` to handle debouncing by setting the `debounceMs` param to a positive integer that defines a set time period in milliseconds.
420
420
No matter how many times the API method is called, the Data Grid will only be re-rendered after that period of time has passed.
When the Data Grid is only set to re-render after a given period of time has passed, the `value` prop will not be updated on each `apiRef.current.setEditCellValue` call.
426
+
When the Data Grid is only set to re-render after a given period of time has passed, the `value` prop will not be updated on each `apiRef.current.setEditCellValue()` call.
427
427
To avoid a frozen UI, the edit component can keep the current value in an internal state and sync it once `value` changes.
428
428
Modify the edit component to enable this feature:
429
429
@@ -456,8 +456,8 @@ To picture better, imagine an edit component with a combo, created following the
456
456
By default, it would require two clicks to change the value of the cell: one click inside the cell to select a new value, and another click outside the cell to save.
457
457
This second click can be avoided if the first click also stops the edit mode.
458
458
To create an edit component with auto-stop, call `apiRef.current.stopCellEditMode` after setting the new value.
459
-
Since `apiRef.current.setEditCellValue` may do additional processing, you must wait for it to resolve before stopping the edit mode.
460
-
Also, it is a good practice to check if `apiRef.current.setEditCellValue` has returned `true`.
459
+
Since `apiRef.current.setEditCellValue()` may do additional processing, you must wait for it to resolve before stopping the edit mode.
460
+
Also, it is a good practice to check if `apiRef.current.setEditCellValue()` has returned `true`.
461
461
It will be `false` if `preProcessEditProps` set an error during [validation](#validation).
462
462
463
463
```tsx
@@ -479,7 +479,7 @@ The following demo implements an edit component with auto-stop, based on a nativ
Avoid using edit components with auto-stop in columns that use long-running `preProcessEditCellProps` because the UI will freeze while waiting for `apiRef.current.setEditCellValue`.
482
+
Avoid using edit components with auto-stop in columns that use long-running `preProcessEditCellProps` because the UI will freeze while waiting for `apiRef.current.setEditCellValue()`.
483
483
Instead, use the provided interactions to exit edit mode.
The call to `apiRef.current.setEditCellValue` returns a promise that must be awaited.
80
+
The call to `apiRef.current.setEditCellValue()` returns a promise that must be awaited.
81
81
For instance, if the `singleSelect` column type is used, not awaiting will cause the other column to be rendered with a `value` that is not in the options.
A similar behavior can be reproduced with cell editing.
96
-
Instead of `apiRef.current.setEditCellValue`, the `rows` prop must be updated or `apiRef.current.updateRows` be used.
96
+
Instead of `apiRef.current.setEditCellValue()`, the `rows` prop must be updated or `apiRef.current.updateRows()` be used.
97
97
Note that the `onCellEditStart` and `onCellEditStop` props also have to be used to revert the value of the cell changed, in case the user cancels the edit.
Copy file name to clipboardexpand all lines: docs/data/data-grid/row-updates/row-updates.md
+5-5
Original file line number
Diff line number
Diff line change
@@ -14,16 +14,16 @@ It replaces the previous values. This approach has some drawbacks:
14
14
15
15
:::warning
16
16
Updating the `rows` prop causes the Data Grid to recompute the row tree, resulting in losing the current tree information like the expanded rows state.
17
-
Unless the recomputation is explicitly required, the API method `updateRows` should be used.
17
+
Unless the recomputation is explicitly required, the API method `updateRows()` should be used.
18
18
:::
19
19
20
-
## The `updateRows` method
20
+
## The `updateRows()` method
21
21
22
-
If you want to only update part of the rows, you can use the `apiRef.current.updateRows` method.
22
+
If you want to only update part of the rows, you can use the `apiRef.current.updateRows()` method.
23
23
24
24
{{"demo": "UpdateRowsApiRef.js", "bg": "inline"}}
25
25
26
-
The default behavior of `updateRows` API is to upsert rows.
26
+
The default behavior of `updateRows()` API is to upsert rows.
27
27
So if a row has an id that is not in the current list of rows then it will be added to the Data Grid.
28
28
29
29
Alternatively, if you would like to delete a row, you would need to pass an extra `_action` property in the update object as below.
The community version of the Data Grid is limited to a single row update per `apiRef.current.updateRows` call.
36
+
The community version of the Data Grid is limited to a single row update per `apiRef.current.updateRows()` call.
37
37
Multiple row updates at a time are supported in [Pro](/x/introduction/licensing/#pro-plan) and [Premium](/x/introduction/licensing/#premium-plan) plans.
- Updating the [`rows` prop](/x/react-data-grid/row-updates/#the-rows-prop) or calling `apiRef.current.setRows` will now remove the expansion state of the grid as these methods are meant to replace the rows.
301
-
For partial row updates, use the [`apiRef.current.updateRows`](/x/react-data-grid/row-updates/#the-updaterows-method) method instead.
300
+
- Updating the [`rows` prop](/x/react-data-grid/row-updates/#the-rows-prop) or calling `apiRef.current.setRows()` will now remove the expansion state of the grid as these methods are meant to replace the rows.
301
+
For partial row updates, use the [`apiRef.current.updateRows()`](/x/react-data-grid/row-updates/#the-updaterows-method) method instead.
0 commit comments