How to edit only by click EditButton

user_14313631 0
Viewed 54

React admin - A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design. Open sourced and maintained by marmelab.

Clicking on any part of the row in PostList will open the editing form, how to make it possible to edit only by click the EditButton.

I make example for demonstration this behaviour codesandbox

posts.tsx

export const PostList = () => (
  <List>
    <Datagrid rowClick="edit">
      <TextField source="id" />
      <ReferenceField source="userId" reference="users">
        <TextField source="name" />
      </ReferenceField>

      <TextField source="title" />
      <EditButton />
    </Datagrid>
  </List>
);

App.tsx

const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="posts" list={PostList} edit={PostEdit} />
    <Resource name="users" list={UserList} />
  </Admin>
);

if i comment edit={PostList} edit button do not work

const App = () => (
  <Admin dataProvider={dataProvider}>
    <Resource name="posts" list={PostList} /*edit={PostEdit}*/ />
    <Resource name="users" list={UserList} />
  </Admin>
);

I want edit post only by click Edit Button

react-admin reactjs
1 Answers

You need to remove rowClick="edit" from datagrid

export const PostList = () => (
  <List>
    <Datagrid> // remove rowClick="edit"
      <TextField source="id" />
      <ReferenceField source="userId" reference="users">
        <TextField source="name" />
      </ReferenceField>

      <TextField source="title" />
      <EditButton />
    </Datagrid>
  </List>
);
user_66285620
Related