React-Admin | Bulk-Select with ReferenceField

react-admin textfield
react-admin datefield
react-admin github
react admin quickstart
react-admin sidebar
react-admin useform
react-admin rowclick
react-admin fetchutils

In our application, we're trying to use Datagrid within ReferenceField to create/modify/delete related records, as shown in https://marmelab.com/blog/2018/07/09/react-admin-tutorials-form-for-related-records.html

All the functionality shown in the tutorial works well, except the bulk-actions added in a recent react-admin update. Clicking these checkboxes gives

Uncaught TypeError: _this.props.onToggleItem is not a function

I believe this is because the onToggleItem prop is normally provided by the List component, however in this application, Datagrid doesn't have a parent List component.

Adding a List component between ReferenceManyField and Datagrid allows bulk select/delete to work after some changes to the style, however this causes another issue: the current displayed page (i.e. records 1-10, 11-20, etc) is stored per-resource in the store, and so it is possible to have a situation where the store says we're on page 2, and displays page 2, which is empty because there are only enough related items to fill one page.

Am I missing something here? Or is bulk-select inside ReferenceManyField not possible at the moment?

export const NetworksShow = (props) => (
  <Show title={<NetworksTitle />} actions={<NetworksShowActions />} {...props}>

        <ReferenceManyField addLabel={false} target="ipid" reference="acl-network">
          <List style={{ margin: '0px -24px -16px -24px' }} {...props} actions={<NetworkACLCardActions ipid={props.id}/>} filter={{ ipid: _.has(props, 'id') ? props.id : undefined }}>
            <Datagrid hasBulkActions={true}>
              <ReferenceField label="Network" source="ipid" reference="networks">
                <TextField source="name" />
              </ReferenceField>
              <TextField label="URL" source="url" />
              <BWChip label="Action" source="wb" />
              <EditButton />
              <DeleteButton />
            </Datagrid>
          </List>
        </ReferenceManyField>
  </Show>
);

As I've understood from the documentation, Datagrid is just an iterator "dumb component". It just "shows" things that the parent - usually List (connected component) or in your case ReferenceManyField - element previously has fetched. Thus I think that BulkActions can only be functional when provided by a List element.

For the second part of your issue, Lists should be used top-level and not within other elements that's why it breaks your pagination.

SimpleList with ReferenceField ? · Issue #530 · marmelab/react-admin, Hello, thanks you for your project. I think there is a bug with ReferenceField. When I use ReferenceField and the source is null, the loading  Vali is a responsive and free dashboard theme/template built with Bootstrap 4, SASS and PUG.js.

As a side-effect of https://github.com/marmelab/react-admin/pull/2365, it is now possible to use ReferenceManyField -> List -> Datagrid in the way described in the question.

For example, we're now doing the following:

      <ReferenceManyField addLabel={false} target="groupid" reference="users">
        <List
          style={{ margin: '0px -24px -16px -24px' }}
          filter={{ groupid: id }}
          {...props}
        >
          <Datagrid hasBulkActions>
            <LinkField label="Name" source="name" />
            <LinkField label="Username" source="email" />
            <FlexibleBooleanField label="Email" source="allowemail" />
            <ACLChip label="User Access" source="aclid" />
          </Datagrid>
        </List>
      </ReferenceManyField>

Bulk actions works with the above, and any issues with pagination are avoided as react-admin now checks and modifies pagination if nothing appears on the current page.

ReferenceField always display · Issue #2388 · marmelab/react-admin, in src/posts.js import React from 'react'; import { List, Datagrid, TextField, EmailField, ReferenceField } from 'react-admin'; export const PostList = (props)  React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. Declarative views make your code more predictable and easier to debug. Build encapsulated components that manage their own state, then compose

I implemented "DumbList" which takes data from parent component instead of loading it itself. This solves the problem:

import React from 'react';
import { ListController } from 'ra-core';
import { ListView } from 'ra-ui-materialui/esm/list/List';

export const DumbList = props =>
  <ListController {...props}>
    {controllerProps => {
      let { data } = props
      const ids = Object.keys(data || {})
      const total = ids.length
      return <ListView
        {...props}
        // This is important, otherwise bulkActionsToolbar ends up on very top of the page
        classes={{ card: 'relative' }}
        {...Object.assign(controllerProps, { data, ids, total })} />
    }}
  </ListController>

Tutorial · React-Admin, The <ReferenceField> component accepts a sortBy prop, which specifies the field to use for sorting instead of the source . So in your case, you  Our admin template is one of the most popular open-source admin panel templates built on top of Bootstrap. CoreUI admin dashboard delivers a bunch of responsive, customizable, and reusable components you need to create modern, beautiful, responsive apps.

Sorting a list by a referenced field react-admin, How can I create a custom page with #react-admin without the menu sidebar Your id being null, should just leave the ReferenceField empty, not displaying  Strapi is the next-gen headless CMS, open-source, javascript, enabling content-rich experiences to be created, managed and exposed to any digital device.

Hottest 'react-admin' Answers, Let's look at it a bit closer! How we would display total of scored goals following the react-admin documentation: <ReferenceField label="goals  Yarn & Needle Arts. SHOP BY YARN WEIGHT. Loop Yarn - Knit Without Needles. Red Heart Pomp-a-doodle Yarn. Knit & Crochet Project Ideas. Knitting Classes. Crocheting Classes. Ship to Home (449) Available In-Store (166) FREE Store Pick-up (163) Available In-Store (166) FREE Store Pick-up (163) Ship to Home (449) Lion Brand (89) Premier Yarns (45)

Give a Second API to Your React-admin App, React-admin is a framework that uses React, Material UI, React Router, Datagrid,ReferenceField, TextField, EmailField } from 'react-admin';  Best open source admin dashboard & control panel theme. Built on top of Bootstrap, AdminLTE provides a range of responsive, reusable, and commonly used components. Bootstrap 4 Premium admin dashboard with a fresh, new design and outsanding funtionality. ArchitectUI is a Bootstrap 4 based template for admin dashboards and control admin panels.

Comments
  • That makes sense. Using <List> was less than ideal anyway, as it's doing it's own requests for data which is already available from the <ReferenceManyField>. I'm thinking my best option might be to write a component to replace <List> which takes the data prop from <ReferenceManyField>, renders the bulk actions toolbar, handles onToggleItem, etc. Does this sound right?
  • Yes this sounds like the way to go. The good thing with react-admin is that when something doesn't work the way you want it to, you can always create a custom component doing exactly what you need.