Refine•2y ago

EditButton isn't navigating to the edit page when clicked

I'm having trouble with the

EditButton

EditButton

component in my

OrganizationsList

OrganizationsList

component. When I click the

edit

edit

button in the list, it doesn't navigate to the edit page for the associated row, even though the link appears correct when hovering over the button. The

EditButton

EditButton

is being used within a

DataGrid

DataGrid

column with

getActions

getActions

to create the button for each row.

Here's the relevant code for the

OrganizationsList

OrganizationsList

component:

import { DataGrid } from "@mui/x-data-grid";
import { EditButton, List, useDataGrid } from "@refinedev/mui";
import { format } from "date-fns";

import { ORGANIZATIONS_QUERY } from "./organizations.query";

export const OrganizationsList = (
) => {
  const { dataGridProps } = useDataGrid({
    resource: "organizations",
    meta: {
      gqlQuery: ORGANIZATIONS_QUERY,
      variables: {
        offset: 0,
        limit: 10,
        where: {},
        order_by: {},
      },
    },
  });

  return (
    <List title="Organizations List">
      <div style={{ height: 600 }}>
        <DataGrid
          {...dataGridProps}
          columns={[
            { field: "name", headerName: "Name", width: 150 },
            {
              field: "created_at",
              headerName: "Created at",
              width: 250,
              renderCell: (params) =>
                format(new Date(params.value), "yyyy-MM-dd HH:mm"),
            },
            {
              field: "edit",
              type: "actions",
              getActions: (params) => [
                <EditButton recordItemId={params.id} hideText />,
              ],
              width: 250,
            },
          ]}
          paginationMode="server"
        />
      </div>
      <EditButton recordItemId={1} hideText />,
    </List>
  );
};

import { DataGrid } from "@mui/x-data-grid";
import { EditButton, List, useDataGrid } from "@refinedev/mui";
import { format } from "date-fns";

import { ORGANIZATIONS_QUERY } from "./organizations.query";

export const OrganizationsList = (
) => {
  const { dataGridProps } = useDataGrid({
    resource: "organizations",
    meta: {
      gqlQuery: ORGANIZATIONS_QUERY,
      variables: {
        offset: 0,
        limit: 10,
        where: {},
        order_by: {},
      },
    },
  });

  return (
    <List title="Organizations List">
      <div style={{ height: 600 }}>
        <DataGrid
          {...dataGridProps}
          columns={[
            { field: "name", headerName: "Name", width: 150 },
            {
              field: "created_at",
              headerName: "Created at",
              width: 250,
              renderCell: (params) =>
                format(new Date(params.value), "yyyy-MM-dd HH:mm"),
            },
            {
              field: "edit",
              type: "actions",
              getActions: (params) => [
                <EditButton recordItemId={params.id} hideText />,
              ],
              width: 250,
            },
          ]}
          paginationMode="server"
        />
      </div>
      <EditButton recordItemId={1} hideText />,
    </List>
  );
};

Can anyone help me understand why the

EditButton

EditButton

isn't navigating to the edit page when clicked? Thank you!

kapa.ai•6/23/24, 7:22 AM

Hi @sha. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•6/23/24, 7:22 AM

----------------------
Based on the information provided and the knowledge sources, it seems like the

EditButton

EditButton

should navigate to the edit page when clicked. Here are a few things to check and ensure:

Correct Usage of : The prop is crucial for the
```
EditButton
```
```
EditButton
```
to function correctly. It appends the record id to the end of the route path for the edit route. Ensure that is correctly passed to .
Routing Configuration: Ensure that your routing configuration in your application is set up correctly to handle the edit route for the resource.
Component Import and Usage: Ensure that the
```
EditButton
```
```
EditButton
```
component is correctly imported from .

Here is a refined version of your

OrganizationsList

OrganizationsList

component based on the provided code and the knowledge sources:

```jsx
import { DataGrid } from "@mui/x-data-grid";
import { EditButton, List, useDataGrid } from "@refinedev/mui";
import { format } from "date-fns";

import { ORGANIZATIONS_QUERY } from "./organizations.query";

export const OrganizationsList = () => {
const { dataGridProps } = useDataGrid({
resource: "organizations",
meta: {
gqlQuery: ORGANIZATIONS_QUERY,
variables: {
offset: 0,
limit: 10,
where: {},
order_by: {},
},
},
});

kapa.ai•6/23/24, 7:22 AM

return (
<List title="Organizations List">
<div style={{ height: 600 }}>
<DataGrid
{...dataGridProps}
columns={[
{ field: "name", headerName: "Name", width: 150 },
{
field: "created_at",
headerName: "Created at",
width: 250,
renderCell: (params) =>
format(new Date(params.value), "yyyy-MM-dd HH:mm"),
},
{
field: "edit",
type: "actions",
getActions: (params) => [
<EditButton recordItemId={params.id} hideText />,
],
width: 250,
},
]}
paginationMode="server"
/>
</div>
</List>
);
};
useNavigationEditButtonuseNavigationparams.idEditButton` is rendering as expected.

kapa.ai•6/23/24, 7:22 AM

If the issue persists, you might want to check the routing setup in your application or refer to the Refine documentation (https://refine.dev/docs/ui-integrations/material-ui/components/buttons/edit-button/#recorditemid) for more details on the

EditButton

EditButton

component.
----------------------
Note: you can ask me a follow up question by @ mentioning me again

----------------------

kapa.ai•6/23/24, 7:22 AM

@991649334091321364 kapa.ai is still learning and improving, please let us know how it did by reacting below