Refine MUI Delete button on list page disappeared after updating to latest version.

After updating the refine to latest version, I can not find delete button on the list page. why?

2 Replies

Hi @David Chen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It seems like the issue you're experiencing with the Delete button disappearing on the list page after updating to the latest version of Refine might be related to access control settings or version compatibility. Here are a few steps you can take to troubleshoot and potentially resolve the issue: 1. Check Access Control Settings: Ensure that the accessControl settings are correctly configured. The DeleteButton can be hidden if the user does not have the necessary permissions. You can use the accessControl prop to manage this:

   import { DeleteButton } from "@refinedev/mui";  
   
   export const MyListComponent = () => {  
     return (  
       <DeleteButton accessControl={{ enabled: true, hideIfUnauthorized: true }} />  
     );  
   };

   import { DeleteButton } from "@refinedev/mui";  
   
   export const MyListComponent = () => {  
     return (  
       <DeleteButton accessControl={{ enabled: true, hideIfUnauthorized: true }} />  
     );  
   };

Source (https://refine.dev/docs/ui-integrations/material-ui/components/buttons/delete-button/#accesscontrol) 2. Update Refine Dependencies: Ensure that all your Refine dependencies are updated to compatible versions. Sometimes, issues arise due to mismatched versions of different Refine packages. Here is an example of the versions that resolved a similar issue:

   "@pankod/refine-core": "^3.36.0",
   "@pankod/refine-mui": "^3.37.0",
   "@pankod/refine-nextjs-router": "^3.25.6",
   "@pankod/refine-simple-rest": "^3.25.6",
   "next": "^12.2.0",

   "@pankod/refine-core": "^3.36.0",
   "@pankod/refine-mui": "^3.37.0",
   "@pankod/refine-nextjs-router": "^3.25.6",
   "@pankod/refine-simple-rest": "^3.25.6",
   "next": "^12.2.0",

Source (https://github.com/refinedev/refine/issues/2099) 3. Verify Button Configuration: Ensure that the DeleteButton is correctly added to your list component. Here is an example of how to add a DeleteButton to each row in a list:

   import React from "react";  
   import {  
       useDataGrid,  
       DataGrid,  
       GridColumns,  
       EditButton,  
       DeleteButton,  
       List,  
       Stack,  
   } from "@refinedev/mui";  
   
   import { IPost } from "interfaces";  
   
   export const PostList: React.FC = () => {  
       const { dataGridProps } = useDataGrid<IPost>({  
           meta: {  
               populate: ["category"],  
           },  
       });  
   
       const columns = React.useMemo<GridColumns<IPost>>(  
           () => [  
               // other columns  
               {  
                   headerName: "Actions",  
                   headerAlign: "center",  
                   field: "actions",  
                   minWidth: 180,  
                   align: "center",  
                   flex: 1,  
                   sortable: false,  
                   renderCell: function render({ row }) {  
                       return (  
                           <Stack direction="row" spacing={1}>  
                               <EditButton  
                                   size="small"  
                                   hideText  
                                   recordItemId={row.id}  
                               />  
                               <DeleteButton  
                                   size="small"  
                                   hideText  
                                   recordItemId={row.id}  
                               />  
                           </Stack>  
                       );  
                   },  
               },  
           ],  
           [],  
       );  
   
       return (  
           <List>  
               <DataGrid {...dataGridProps} columns={columns} autoHeight />  
           </List>  
       );  
   };

   import React from "react";  
   import {  
       useDataGrid,  
       DataGrid,  
       GridColumns,  
       EditButton,  
       DeleteButton,  
       List,  
       Stack,  
   } from "@refinedev/mui";  
   
   import { IPost } from "interfaces";  
   
   export const PostList: React.FC = () => {  
       const { dataGridProps } = useDataGrid<IPost>({  
           meta: {  
               populate: ["category"],  
           },  
       });  
   
       const columns = React.useMemo<GridColumns<IPost>>(  
           () => [  
               // other columns  
               {  
                   headerName: "Actions",  
                   headerAlign: "center",  
                   field: "actions",  
                   minWidth: 180,  
                   align: "center",  
                   flex: 1,  
                   sortable: false,  
                   renderCell: function render({ row }) {  
                       return (  
                           <Stack direction="row" spacing={1}>  
                               <EditButton  
                                   size="small"  
                                   hideText  
                                   recordItemId={row.id}  
                               />  
                               <DeleteButton  
                                   size="small"  
                                   hideText  
                                   recordItemId={row.id}  
                               />  
                           </Stack>  
                       );  
                   },  
               },  
           ],  
           [],  
       );  
   
       return (  
           <List>  
               <DataGrid {...dataGridProps} columns={columns} autoHeight />  
           </List>  
       );  
   };

Source (https://refine.dev/blog/build-admin-panel-with-material-ui-and-strapi/#deleting-a-record) By following these steps, you should be able ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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