React-admin: Allow ordering in ArrayInput

Created on 16 May 2018  路  3Comments  路  Source: marmelab/react-admin

I have a list of elements, for which the order is important. I can display them in the ArrayInput, making use of SimpleFormIterator, and edit them this way. However, I struggle to find a way to change the order of the elements in my form. Ideally, this would be through drag and drop.

I don't know if this should be an extension to the SimpleFormIterator, or that a new Form Iterator object needs to be created to handle ordering of the displayed elements.

Most helpful comment

Since, this is top result for - "Ordered Array Input react-admin"

Here is what I ended up with - https://github.com/coding-blocks/cb-junior-admin/blob/master/src/lib/OrderedArrayInput.jsx#L26

important things to note:

input.onChange( newValuesArray ) // sets the new values array, (just passin array of ids here for referenceArray)
input.value // contains currently set values. (even though it is value, it is an array when used as children of ReferenceArrayInput)
choices // contains list of possible options

Hope this helps anyone who lands up here 馃憤

All 3 comments

1836 created with a proposal for solution.

This is outside the scope of react-admin, as it implies bundling a drag-and-drop library with the core. However, I encourage you to implement it in userland, and to mention it in the list of third-party input packages in the react-admin documentation.

Since, this is top result for - "Ordered Array Input react-admin"

Here is what I ended up with - https://github.com/coding-blocks/cb-junior-admin/blob/master/src/lib/OrderedArrayInput.jsx#L26

important things to note:

input.onChange( newValuesArray ) // sets the new values array, (just passin array of ids here for referenceArray)
input.value // contains currently set values. (even though it is value, it is an array when used as children of ReferenceArrayInput)
choices // contains list of possible options

Hope this helps anyone who lands up here 馃憤

Was this page helpful?
0 / 5 - 0 ratings