React-admin create dialog inside List

Question

Is it ever possible to create a the folowing scenario with react-admin?

Render items with List+Datagrid
Render also a button in each row
User clicks button
Show a dialog with another List+Datagrid from another resource

In my implementation, when button is first clicked, it correctly opens dialog and renders answers. However if I change sorting or go to next page, it also affects the data grid that renders questions.

The reason is I guess when I apply sorting etc in the answers list, it changes query string in the browser, and it effects questions too.

Relevant line: https://github.com/marmelab/react-admin/blob/eb3c1acbf4ecc81793b8e790e11a6f84f9bdbc1b/packages/ra-core/src/controller/useListController.ts#L133

Is it possible to have two data grid in same page? (With different resources and sorting context etc).

My impl:


// render a dialog that contains answer for each questions
const ShowAnwersButton  = (props) => {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <Dialog open={open} onClose={() => setOpen(false)}>
        <List
          resource="answers"
          basePath="/answers"
          filter={{ question_id: props.record.id }}
        >
          <MyDataGrid>
            <TextField source="id" />
            <DateField source="created_at" />
            <TextField source="name" />
          </MyDataGrid>
        </List>
      </Dialog>
      <Button
        variant={open ? "contained" : "outlined"}
        color="primary"
        onClick={(e) => setOpen(true)}
      >
        Answers
      </Button>
    </>
  );
};

// questions
export const QuestionsList = (props) => (
  <List {...props}>
    <Datagrid>
      <TextField source="id"/>
      <DateTime source="created_at" disabled />
      <BooleanField source="disabled" />
      <ShowAnwersButton source="dummy" />
    </EditableDatagrid>
  </List>
);

François Zaninotto · Accepted Answer · 2020-11-09 16:14:07Z

1

You can have two Datagrids in the same page, but not two Lists. In react-admin, the sorting, filtering and pagination of a List use the URL as state, so there can be only one List per route.

For your use case, you'll have to call the dataProvider.getList() manually, put the results in a <ListContext>, and then you can use a second <Datagrid> inside it. It requires knowledge of public but undocumented react-admin APIs. You should be prepared to dig in the react-admin source code for inspiration:

useListController
useReferenceManyFieldController
List
ListContext

answered Nov 9, 2020 at 16:14

François Zaninotto

7,3952 gold badges38 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jens Wunderwald · Accepted Answer · 2024-08-22 18:50:46Z

0

disableSyncWithLocation solves the issue (see https://marmelab.com/react-admin/List.html)

answered Aug 22, 2024 at 18:50

Jens Wunderwald

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

React-admin create dialog inside List

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related