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
This component renders a button allowing to edit multiple records at once.
308
+
This component, part of the [enterprise edition](https://marmelab.com/ra-enterprise/modules/ra-form-layout)<imgclass="icon"src="./img/premium.svg" />, lets users edit multiple records at once. To be used inside [the `<Datagrid bulkActionButtons>` prop](./Datagrid.md#bulkactionbuttons).
305
309
306
310
The button opens a dialog containing the form passed as children. When the form is submitted, it will call the dataProvider's `updateMany` method with the ids of the selected records.
307
311
@@ -361,36 +365,7 @@ const PostList = () => (
361
365
);
362
366
```
363
367
364
-
365
-
**Tip:** You are not limited to using a `<SimpleForm>` as children. You can for instance use an `<InputSelectorForm>`, which allows to select the fields to update.
Check out the [`<InputSelectorForm>`](#inputselectorform) documentation for more information.
368
+
**Tip:** You are not limited to using a `<SimpleForm>` as children. You can for instance use an `<InputSelectorForm>`, which allows to select the fields to update. Check out the [`<InputSelectorForm>`](#usage-with-inputselectorform) below for more information.
394
369
395
370
#### Props
396
371
@@ -402,7 +377,7 @@ Check out the [`<InputSelectorForm>`](#inputselectorform) documentation for more
402
377
|`mutationOptions`| - | Object | - | Mutation options passed to [react-query](https://tanstack.com/query/v3/docs/react/reference/useMutation) when calling `updateMany`|
403
378
404
379
405
-
#####`children`
380
+
#### `children`
406
381
407
382
`<BulkUpdateFormButton>` expects a form component as children, such as `<SimpleForm>` or `<InputSelectorForm>`.
The `mutationOptions` prop can be used to pass options to the [react-query mutation](https://react-query.tanstack.com/reference/useMutation#options) used to call the dataProvider's `updateMany` method.
If you look under the hood, you will see that `<BulkUpdateFormButton>` provides a `<SaveContext>` to its children, which allows them to call `updateMany` with the ids of the selected records.
541
-
542
-
However since we are in the context of a list, there is no `<RecordContext>` available. Hence, the following inputs cannot work inside a `<BulkUpdateFormButton>`:
543
-
544
-
-`<ReferenceOneInput>`
545
-
-`<ReferenceManyInput>`
546
-
-`<ReferenceManyToManyInput>`
547
-
548
-
### `<InputSelectorForm>`
513
+
#### Usage With `<InputSelectorForm>`
549
514
550
-
This component renders a form allowing to select the fields to update in a record.
515
+
`<BulkUpdateFormButton>` works best with `<InputSelectorForm>`, which component renders a form allowing to select the fields to update in a record.
`<InputSelectorForm>` also expects to be used inside a [`<SaveContext>`](https://marmelab.com/react-admin/useSaveContext.html#usage). When the form is submitted, it will call the `save` method from the `<SaveContext>`, with the value of the selected inputs.
611
-
612
-
**Tip:**`<InputSelectorForm>` is particularily useful when used with [`<BulkUpdateFormButton>`](#bulkupdateformbutton), as it allows to select the fields to update.
|`inputs`| Required (*) | Array | - | The list of inputs from which the user can pick |
647
-
648
-
`<InputSelectorForm>` also accepts the same props as [`<WizardForm>`](#wizardform), except the `onSubmit` and `children` props.
649
-
650
-
##### `inputs`
651
-
652
551
Use the `inputs` prop to specify the list of inputs from which the user can pick. Each input must have a `label` and an `element`.
653
552
654
553
```tsx
@@ -699,46 +598,15 @@ const PostEdit = () => (
699
598
);
700
599
```
701
600
702
-
#### Internationalization
703
-
704
-
You can use translation keys as input labels.
705
-
706
-
```tsx
707
-
// in i18n/fr.ts
708
-
709
-
const customFrenchMessages = {
710
-
resources: {
711
-
posts: {
712
-
name: 'Article |||| Articles',
713
-
fields: {
714
-
published_at: 'Publié le',
715
-
is_public: 'Public',
716
-
},
717
-
},
718
-
},
719
-
};
601
+
#### Limitations
720
602
721
-
// in posts/postEdit.tsx
603
+
If you look under the hood, you will see that `<BulkUpdateFormButton>` provides a `<SaveContext>` to its children, which allows them to call `updateMany` with the ids of the selected records.
However since we are in the context of a list, there is no `<RecordContext>` available. Hence, the following inputs cannot work inside a `<BulkUpdateFormButton>`:
Copy file name to clipboardExpand all lines: docs/Datagrid.md
+6-2Lines changed: 6 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -147,7 +147,6 @@ Finally, `<Datagrid>` inspects children for props that indicate how it should be
147
147
Your browser does not support the video tag.
148
148
</video>
149
149
150
-
151
150
Bulk action buttons are buttons that affect several records at once, like mass deletion for instance. In the `<Datagrid>` component, the bulk actions toolbar appears when a user ticks the checkboxes in the first column of the table. The user can then choose a button from the bulk actions toolbar. By default, all Datagrids have a single bulk action button, the bulk delete button. You can add other bulk action buttons by passing a custom element as the `bulkActionButtons` prop of the `<Datagrid>` component:
**Tip**: React-admin provides four components that you can use in `bulkActionButtons`: [`<BulkDeleteButton>`](./Buttons.md#bulkdeletebutton), [`<BulkUpdateButton>`](./Buttons.md#bulkupdatebutton), [`<BulkExportButton>`](./Buttons.md#bulkexportbutton), and [`<BulkUpdateFormButton>`](./Buttons.md#bulkupdateformbutton).
175
+
**Tip**: React-admin provides four components that you can use in `bulkActionButtons`:
176
+
177
+
-[`<BulkDeleteButton>`](./Buttons.md#bulkdeletebutton) (enabled by default)
178
+
-[`<BulkExportButton>`](./Buttons.md#bulkexportbutton) to export only the selection
179
+
-[`<BulkUpdateButton>`](./Buttons.md#bulkupdatebutton) to immediately update the selection
180
+
-[`<BulkUpdateFormButton>`](./Buttons.md#bulkupdateformbutton) to display a form allowing to update the selection
177
181
178
182
**Tip**: You can also disable bulk actions altogether by passing `false` to the `bulkActionButtons` prop. In this case, the checkboxes column doesn't show up.
0 commit comments