Search code examples
admin-on-rest

Admin-On-Rest: Display Json grid in edit view


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?


Solution

  • This is not possible currently. However, someone is working on a PR for that. See https://github.com/marmelab/admin-on-rest/pull/697