I'm using a List from react-admin and my data was limited to 100 items.
I don't need pagination and i'm sure i'm recieving more then 100 items in my list but in MyComponent i only this 100 items. There is a limit for lists ?
<List title="welcome" filters={<CustomFilter />} pagination={null} {...props} >
<MyComponent />
</List>
Related
I have a Razor Component (.net 6) where I make use of the Radzen DataGrid Multiple Selection.
<RadzenDataGrid
#ref="contactsGrid" Data="#contacts" AllowColumnResize="true" EditMode="DataGridEditMode.Single"
RowUpdate="#OnUpdateRow" RowCreate="#OnCreateRow"
AllowSorting="true" AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive"
TItem="ContactModel" AllowRowSelectOnRowClick="false" SelectionMode="DataGridSelectionMode.Multiple" #bind-Value=#selectedContacts>
<Columns>
<RadzenDataGridColumn TItem="ContactModel" Width="40px" Sortable="false" Filterable="false">
<HeaderTemplate>
<RadzenCheckBox TriState="false" TValue="bool" Value="#(contacts.Any(i => selectedContacts != null && selectedContacts.Contains(i)))" Change="#(args => selectedContacts = args ? contacts.ToList() : null)" />
</HeaderTemplate>
<Template Context="contacts">
<RadzenCheckBox TriState="false" Value="#(selectedContacts != null && selectedContacts.Contains(contacts))" TValue="bool" Change=#(args => { contactsGrid.SelectRow(contacts); }) />
</Template>
</RadzenDataGridColumn>
<!-- FirstName -->
<RadzenDataGridColumn TItem="ContactModel" Property="FirstName" Title="FirstName">
<EditTemplate Context="contact">
<RadzenTextBox #bind-Value="contact.FirstName" Style="width:100%; display: block" Name="FirstName" />
<RadzenRequiredValidator Text="FirstName is required" Component="FirstName" Popup="true" />
</EditTemplate>
</RadzenDataGridColumn>
<!-- LastName -->
<RadzenDataGridColumn TItem="ContactModel" Property="LastName" Title="LastName">
<EditTemplate Context="contact">
<RadzenTextBox #bind-Value="contact.LastName" Style="width:100%; display: block" Name="LastName" />
<RadzenRequiredValidator Text="LastName is required" Component="LastName" Popup="true" />
</EditTemplate>
</RadzenDataGridColumn>
</Columns>
</RadzenDataGrid>
In the HeaderTemplate you can directly select or deselect all items.
Is it possible to change the function so that only all items are selected that match the filter? i.e. which items are currently displayed when I search for certain items using the filter option?
you can use contactsGrid.View to get visible rows. try to use contactsGrid.View instead of selectedContacts.
I have a RadListView for a prop, totalMovies, which is an array. Each movie contains an image field and favorite field. If the favorite field is false, then an unfilled heart image shows and there's an event that fires on tap that changes that movie's favorite to true. After clicking the heart, I see in console that it registers and I verified again with VueTools that totalMovies shows the movies I favorites as having favorite: true, but the image that shows is always the unfilled-heart image. I am guessing or assuming that the RadListView is not refreshing properly?
<RadListView
for="(movie,index) in totalMovies"
#itemTap="onItemTap($event)"
itemHeight="80"
:key="index"
gridSpanCount=1
>
<v-template>
<FlexboxLayout class="item-row" :key="index" flexDirection="row" width="100%" height="100%">
<Image v-if="movie.favorite" width="20" src="~/assets/images/heart-filled.png" />
<Image v-else #tap="handleToggleFavorite(movie)" width="20" src="~/assets/images/heart-unfilled.png" />
</FlexboxLayout>
</v-template>
</RadListView>
EDIT: Adding playground: http://play.nativescript.org/?template=play-vue&id=GNo11S&v=2
ObservableArray listens to changes on array index and refreshes the list view. So if you are using ObservableArray, try to update item at index using setItem method.
Otherwise in your case simple array should work as Vue can detect the changes.
I'm setting up redux form in react application, in the form i have dual list box, i cannot shift values from one box to another, vise versa.
other thing im doing checkbox switches it doesn't post value when pages loads when ever i touch/click on it then it does, in both cased true/false but not default false.
for Dual list box
<Field
name="list"
type="select"
onChange={this.handleOnMove}
component={this.renderReactSelectWrapper}
/>
renderReactSelectWrapper = props => (
<DualListBox
value={props.input.value}
onChange={props.input.onChange}
onBlur={props.input.onBlur(props.input.value)}
options={available}
selected={selected}
placeholder="Select"
simpleValue
icons={{
moveLeft: <span key={0}><</span>,
moveAllLeft: [<span key={1}><<</span>],
moveRight: <span key={2}>></span>,
moveAllRight: [<span key={4}>>></span>],
moveDown: <span key={5}>↓</span>,
moveUp: <span key={6}>↑</span>
}}
/>
);
For Checkbox/Switch
<Field
name="available"
id="available"
component={this.renderToggleInput}
/>
renderToggleInput = field => ( <Switch checked={field.input.value} onChange={field.input.onChange} /> );
I need to have value shift from one box to another, in the case of checkbox/switch i need to post when page loads.
I was tackling the same problem. I think the issue is you aren't updating the selected array correctly. The follow code worked for me on the selected option.
<DualListBox
options={options}
value={this.props.input.value}
onChange={this.props.input.onChange}
selected={[...this.props.input.value]}
/>
How can you expand the size of ReferenceInput and AutocompleteInput fields in admin on rest?
<Create title="My title" {...props}>
<SimpleForm>
<TextInput label= "field 1" source="f1" validate={[ required, minLength(3), maxLength(20) ]} />
<ReferenceInput label="field 2" source="f2" validate={[ required ]} reference="reference1" allowEmpty>
<AutocompleteInput optionText="f3" />
</ReferenceInput>
</SimpleForm>
</Create>
Image: Default field size in red. Desired size in blue
Thanks in advance
You can pass styles to the underlying Material UI component using the elStyle and options props.
https://marmelab.com/admin-on-rest/Fields.html
Background
I'm using the Admin on rest Datagrid component to render a REST endpoint. Like this:
<Datagrid>
<TextField source="name" />
<TextField source="email" />
<EditButton />
</Datagrid>
The EditButton routes the User to the corresponding edit page. All works great.
Question
But now I'm trying to work out how to route the user to the edit page on row click instead, without using the EditButton.
My attempts
My first idea was to use the rowOption onCellClick.
<Datagrid rowOptions={ {onClick: rowClick } } >
<TextField source="name" />
<TextField source="email" />
</Datagrid>
where the handle function looks like this.
const rowClick = (proxy, event) => {
console.log(proxy, event);
// how to get the resource id??
}
This captures the row click, and the event data is logged to the console. But as far as I can see the click event data doesn't contain information about the REST resource id of the row.
Has someone used the row click event to do something similar?
Or would a better approach be create a new component (for example ClickableField) to wrap the TextField's and add click event handlers in this wrapping component? Like so:
<Datagrid>
<ClickableField><TextField source="name" /></ClickableField>
<ClickableField><TextField source="email" /></ClickableField>
</Datagrid>
As replied by kunal pareek, the accepted answer suggesting to use onRowSelection worked.
Initially I missed the selectable property passed to the TableRow. But when I added that, the selection event was handled. Thus I ended up with this.
<Datagrid rowOptions={{ selectable: true }} options={{ onRowSelection: rowClick }}>
<TextField source="name" />
<TextField source="email" />
</Datagrid>
Material UI table property has an onRowSelection property. You can use this to define and set custom actions when row is selected
http://www.material-ui.com/#/components/table
You can access these properties in the 'options' prop of the AOR datagrid.
If this fails your clickable field idea should work.