correct-apricot•2mo ago

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

kapa.ai•2mo ago

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:

"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} resource="news" />
              <ShowButton hideText recordItemId={row.id} />
              <DeleteButton hideText recordItemId={row.id} />
            </>
          );
        },
        align: "center",
        headerAlign: "center",
        minWidth: 80,
      },
    ],
    []
  );

  return (
    <List>
      <DataGrid {...dataGridProps} columns={columns} autoHeight />
    </List>
  );
}

"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} resource="news" />
              <ShowButton hideText recordItemId={row.id} />
              <DeleteButton hideText recordItemId={row.id} />
            </>
          );
        },
        align: "center",
        headerAlign: "center",
        minWidth: 80,
      },
    ],
    []
  );

  return (
    <List>
      <DataGrid {...dataGridProps} columns={columns} autoHeight />
    </List>
  );
}

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: ----------------------

kapa.ai•2mo ago

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