Datagrid in Create, Edit page

Question

I want to create a Datagrid inside Create, Edit page to display and manage n-to-n relationship. But I don't know how to pass props into List and Datagrid and what props should be passed.

The Resource to manage this Datagrid named caregiver_student and I put it in my custom restClient file.

Basic info

Relationship info

Here is my code:

<Edit title={<CaregiverTitle />} {...props}>
    <TabbedForm>
        <FormTab label="Personal Info">
            <DisabledInput source="id" />
            <TextInput source="name" />
            <TextInput source="email" />
            <TextInput source="phone" />
            <RadioButtonGroupInput source="account_type" choices={[
                { id: 10, name: 'Caregiver' },
                { id: 20, name: 'Guardian' },
            ]} optionText="name" optionValue="id" />
            <BooleanInput source="status" label="Active"/>
        </FormTab>
        <FormTab label="Relationship">
            <List actions={<RelationActions/>} location={false} title={" "}>
                <Datagrid>
                    <TextField source="id" />
                    <TextField source="name" label="Student"/>
                    <TextField source="relationship" />
                    <EditButton />
                    <DeleteButton />
                </Datagrid>
            </List>
        </FormTab>
    </TabbedForm>
</Edit>

Thank you for your help!

Answer 1

The linked resources should be enclosed in a ReferenceManyField

You can find a complete example in the demo, especially the Customers Edit component

Someone started a PR which might help: https://github.com/marmelab/admin-on-rest/pull/744

Answer 2

I have a similar page with a tab that lists "Batchunits" that belong to a particular "batchid".

<FormTab label="resources.batches.tabs.batchunits">
    <ReferenceManyField addLabel={false} reference="Batchunits" target="batchid">
         <Datagrid bodyOptions={{ stripedRows: true, showRowHover: true}} >
           <TextField source="unitcode" />
           <DateField source="harvested" />
           <BooleanField source="contaminated" label="Contaminated"/>
           <TextField source="note" style={{ maxWidth: '10em', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }} />
           <EditUnitButton />
         </Datagrid>
    </ReferenceManyField>
</FormTab>

But in this setup, Formtab will not accept a Create "button" to create a record of another resource. e.g another "Batchunit. Would be very useful to create another linked Batchunit. Don't know how to do that...