I would like to display the following in an edit page. I'm having trouble making a sub-datagrid to hold the intervals part.
[
{
"name": "Jenn",
"description": "",
"duration": 780,
"level": 2,
"instructor": 1,
"category": 1,
"equipment": [
1,
2
],
"intervals": [
{
"interval": 11,
"time": 30,
"Incline": 30
},
{
"interval": 34,
"time": 30,
"Incline": 0
}
],
"id": 1,
"createdAt": "2017-08-18T13:56:50.000Z",
"updatedAt": "2017-08-18T13:56:50.000Z"
}
]
This is what I currently have:
export const ClassEdit = (props) => (
<Edit title={<ClassTitle />} {...props}>
<SimpleForm>
<DisabledInput source="id" />
{/*<ReferenceInput label="instructor" source="instructor.id" reference="instructor">*/}
{/*<SelectInput optionText="name" />*/}
{/*</ReferenceInput>*/}
<TextInput source="name" />
<LongTextInput source="description" />
<NumberInput source="duration" />
<NumberInput source="level" />
<NumberInput source="instructor" />
<SelectInput source="category" choices={categoryList} />
<SelectArrayInput label="Equipment" source="equipment" choices={equipmentList}/>
<Datagrid >
<NumberField source="intervals.interval"/>
</Datagrid>
</SimpleForm>
</Edit>
I'm guessing I have to somehow pass the sub records into the datagrid, but not sure how to do that?
This is not possible currently. However, someone is working on a PR for that. See https://github.com/marmelab/admin-on-rest/pull/697