How can I add a Datagrid reflecting currect state of ReferenceArrayInput to a react-admin edit form? - react-admin

I'm writing a user management using react-admin and try to make adding users to groups easier, i.e. by adding groups from a user's edit page using auto-complete. Starting with an example, I've got some success using the following:
<ReferenceArrayInput
label="Group"
source="groups"
reference="groups"
>
<AutocompleteArrayInput
{...props}
resettable={true}
allowEmpty={true}
optionText="name"
fullWidth
/>
</ReferenceArrayInput>
However, this method uses Chip component to display selected items inline. I would like to use a Datagrid instead. I know from the source code that I cannot override the display part of an auto-complete (yet?), so I thought I could resort to hiding Chips via CSS, but I would still need a way to display a Datagrid with current selection. So I tried this (it's wrapped in FormWithRedirect, hence formProps):
<ReferenceArrayField
{...formProps}
label="Group"
source="groups"
reference="groups"
>
<Datagrid>
<TextField source="name" />
</Datagrid>
</ReferenceArrayField>
<ReferenceArrayInput
{...formProps}
label="Group"
source="groups"
reference="groups"
>
<AutocompleteArrayInput
resettable={true}
allowEmpty={true}
optionText="name"
fullWidth
/>
</ReferenceArrayInput>
This works almost exactly as I want it, a Datagrid is displayed and it shows the right data for the selection, however, it's not updated when selected items on AutocompleteArrayInput change. How ever I tried (been through probably all the hooks and contexts), I could not make it work.
Is this possible? How can I make Datagrid update when selection changes on AutocompleteArrayInput?

Related

React-Select dropdown is not persisting value after reordering(sorting) them by react-sortable-hoc

I am trying to create a list of dropdowns which can be reordered by dragging them. For drag and drop i am using react-sortable-hoc. Here i am attaching a working sample. Link for sample
To reproduce the issue, Select value in first dropdown by mouse or keyboard. after that drag that element (first dropdown) and drop it at 3rd or 4th position then you observed that dropped dropdown will not persist the value. Selected value displayed at first element. What could be the cause for this? How can i fix it?
You need to pass onSortEnd handler to your srotableContainer as props
<List items={this.state.items} onSortEnd={this.onSortEnd}/>;
I also suggest you add a key on your Item
<Item key={item} data={item} index={index} />
Here is the forked sandbox where it is working:
https://codesandbox.io/s/adoring-raman-l72xw?fontsize=14

v-select/Vue: How to enter value not in the list?

I'm trying to find a way to add a new value using v-select previously not in the list. So that the new value entered will become the selected option.
This is my current code:
<v-select
ref="systemSelect"
v-model="reservation.system"
name="system"
label="Select System"
:disabled="isBusy"
:options="systems"
#input="getSystems"
/>
In UI the component looks like this. Here I use Vuex only to get :options. Currently if I enter a new value and click outside that value disappears since its not found in the list
Expected: Would like to enter a new value and use this value as current in the form and save it. Is there a way to achieve this?
Any help would be appreciated.
Thanks!
If you're using vue select, you can use the attribute taggable and multiple to push your own options:
<v-select taggable multiple />
See this link:
https://vue-select.org/guide/values.html#tagging

Disable undo function in react-admin for List view

It is possible to set the property undoable={false} for the Edit and Create component. This successfully disables the undo feature.
It seems as if this property is not applicable to the List view. Is that correct?
Use Case:
The user is in the List view. She selects an item and chooses to delete it. The delete shall not be undoable.
For List, the undoable property must be specified in DeleteButton:
<List {...props} >
<Datagrid>
...
<DeleteButton undoable={true} />
</Datagrid>

Read from database without DataGrid in Flex

I'm reading data from an SQL database and send it to my Flex app. My source code in Flex is the follow:
<mx:HTTPService id="traffic_signals" url="http://localhost/project/connection.php" resultFormat="e4x"/>
<mx:DataGrid x="251" y="95" dataProvider="{traffic_signals.lastResult..signal}">
<mx:columns>
<mx:DataGridColumn dataField="source" >
<mx:itemRenderer>
<mx:Component>
<mx:Image width="94" height="94"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
I would like to dump this information in another type of control instead of DataGrid. Is it possible, or the only control to do this is DataGrid?
You can use the AdvancedDataGrid control, but basically is the same of DataGrid, the OLAPDataGrid for BI purposes.
You can also display the data in chart controls, but I don't know if is it that you're looking for.

Listview webpart in site definition makes it all fail

I have made a listdefinition which I've put in to a web scoped feature which I've added to WebFeatures in my sitedefinition. In my sitedefinition I've added a list view web part which shall display the list created through the listdefinition. My issue is that when I add the list's name to the List property in the list view web part like so:
<View List="OrderList" BaseViewID="1" WebPartZoneID="Footer" WebPartOrder="2">
</View>
the process of creating the new sub site fails because of this alone. I have 2 other lists which is added to the sitedefinition in the exact same way
<View List="Documents" BaseViewID="1" Type="HTML" WebPartZoneID="Footer" WebPartOrder="1">
</View>
<View List="108" BaseViewID="3" WebPartZoneID="Footer" ContentTypeID="0x012001" WebPartOrder="4">
</View>
The only difference is that those 2 lists are standard sharepoint Documents library and Discussion board. If I remove the custom list's list view web part the entire flow works correctly, but as soon as I add it the entire thing fails.
I've created the listdefinition through VS2010 own listdefinition template etc and I haven't touched a thing. Only changed the name in the List Instance and made sure everything matched in the Elements.xml and Schema.xml files
What is the Url attribute of your ListInstance?
Because the List attribute of the View element must match the Url from the ListInstance. For example, if your ListInstance is defined as:
<ListInstance
FeatureId="00000000-0000-0000-0000-000000000000"
TemplateType="0000"
Title="My Test List"
Url="Lists/OrderList">
</ListInstance>
then your View must be:
<View List="Lists/OrderList" BaseViewID="1" WebPartZoneID="Footer" WebPartOrder="2">
</View>