edit button issue
"use client";
import { DataGrid, GridColDef } from "@mui/x-data-grid";
import {
DeleteButton,
EditButton,
List,
ShowButton,
useDataGrid,
} from "@refinedev/mui";
import React from "react";
export default function NewsList() {
const { dataGridProps } = useDataGrid({});
const columns = React.useMemo<GridColDef[]>(
() => [
{
field: "id",
headerName: "ID",
type: "number",
minWidth: 50,
},
{
field: "title",
flex: 1,
headerName: "Title",
minWidth: 200,
},
{
field: "actions",
headerName: "Actions",
sortable: false,
renderCell: function render({ row }) {
return (
<>
<EditButton hideText recordItemId={row.id} />
<ShowButton hideText recordItemId={row.id} />
<DeleteButton hideText recordItemId={row.id} />
</>
);
},
align: "center",
headerAlign: "center",
minWidth: 80,
},
],
[]
);
return (
<List>
<DataGrid {...dataGridProps} columns={columns} autoHeight />
</List>
);
}
here edit button is not rendering the proper link
2 Replies
Hi @Deepanshu Bajaj. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
It looks like you are experiencing an issue where the
EditButton
is not rendering the proper link in your NewsList
component. Based on the knowledge sources, there are a few things you might want to check and adjust:
1. Ensure Correct Usage of recordItemId
: The recordItemId
prop should be correctly passed to the EditButton
. This prop is used to identify the specific record that the button should link to.
2. Check for Deprecated Props: Make sure you are not using any deprecated props. For instance, the resourceNameOrRouteName
prop is deprecated and should be replaced with the resource
prop.
3. Resource Prop: If you need to specify a different resource, ensure you are using the resource
prop correctly.
Here is an example based on the provided knowledge sources:
In this example, the resource
prop is explicitly set to "news"
for the EditButton
. This ensures that the button will link to the correct resource.
For more details, you can refer to the EditButton documentation (https://refine.dev/docs/ui-integrations/material-ui/components/buttons/edit-button/#resourcenameorroutename-) and the useNavigation hook (https://refine.dev/docs/routing/hooks/use-navigation/).
If the issue persists, please ensure that your refine version is up-to-date and that there are no other conflicting configurations.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@661831547690680321> kapa.ai is still learning and improving, please let us know how it did by reacting below