Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[data grid] checkboxSelection throws error #12239

Closed
benyaminkeykha opened this issue Feb 28, 2024 · 4 comments
Closed

[data grid] checkboxSelection throws error #12239

benyaminkeykha opened this issue Feb 28, 2024 · 4 comments
Labels
component: data grid This is the name of the generic UI component, not the React module! feature: Selection Related to the data grid Selection feature

Comments

@benyaminkeykha
Copy link

benyaminkeykha commented Feb 28, 2024

Steps to reproduce

Link to live example: (required)

Steps:
1.
2.
3.

Current behavior

makes Error: MUI: Could not find the data grid context. It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component. This can also happen if you are bundling multiple versions of the data grid.
in browser

Expected behavior

Show checkboxes in first column of data grid to select rows with them

Context

import * as React from 'react';
import { DataGridPremium } from '@mui/x-data-grid-premium';
import { useDemoData } from '@mui/x-data-grid-generator';
import Box from '@mui/material/Box';

export default function RestoreStateApiRef() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 500,
  });

  const [initialState, setInitialState] = React.useState();

  return (
    <Box sx={{ width: '100%', height: 400 }}>
      <DataGridPremium
        initialState={{
          ...data.initialState,
          ...initialState,
        }}
        pagination
        disableRowSelectionOnClick
        checkboxSelection
        {...data}
      />
    </Box>
  );
}

Your environment

<DataGridPremium
  rows={rows}
  columns={columns}
  checkboxSelection
/>

Search keywords: checkboxSelection
Order ID: 80663

@benyaminkeykha benyaminkeykha added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Feb 28, 2024
@michelengelen
Copy link
Member

Hey @benyaminkeykha could you provide us with a minimal reproduction for this using stackblitz or codesandbox? That would be really helpful.

In the meantime I will have a look at this with the given information!
Thanks! 🙇🏼

@michelengelen michelengelen added component: data grid This is the name of the generic UI component, not the React module! status: waiting for author Issue with insufficient information feature: Selection Related to the data grid Selection feature and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Feb 28, 2024
@michelengelen michelengelen changed the title checkboxSelection makes Error: MUI: Could not find the data grid context. It looks like you rendered your component outside of a DataGrid, DataGridPro or DataGridPremium parent component. This can also happen if you are bundling multiple versions of the data grid. [data grid] checkboxSelection throws error Feb 28, 2024
@michelengelen
Copy link
Member

michelengelen commented Feb 28, 2024

@benyaminkeykha I tried the code you posted, but it does work as expected.
Could you please provide additional information regarding your specific implementation, steps to reproduce the bug, the version you are using and the environment you are using it in?
Thanks! 🙇🏼

Copy link

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @benyaminkeykha?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.

@github-actions github-actions bot removed the status: waiting for author Issue with insufficient information label Feb 28, 2024
@benyaminkeykha
Copy link
Author

This bug resolved when i remove my node modules folder and install it again. Thank you Michel

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module! feature: Selection Related to the data grid Selection feature
Projects
None yet
Development

No branches or pull requests

2 participants