search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
3.92k stars 1.2k forks source link

[data grid] Need a way to show different Checkbox status when one of the children is not selected #13298

Open sarthak-sit opened 1 month ago

sarthak-sit commented 1 month ago

The problem in depth

Mui Datagrid Checkbox.docx

Your environment

"@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.14.1", "@mui/material": "^5.14.1", "@mui/styles": "^5.14.17", "@mui/x-data-grid-pro": "^7.3.2", "@mui/x-license": "^7.2.0", "@reduxjs/toolkit": "^2.2.2", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@mui/x-license-pro": "latest", "@mui/x-data-grid": "latest", "@types/jest": "^27.5.2", "@types/node": "^16.18.91", "@types/react": "^18.2.69", "@types/react-dom": "^18.2.22", "@types/react-router-dom": "^5.3.3", "axios": "^0.24.0", "bootstrap": "4.6.0", "change-case": "^5.4.4", "formik": "^2.4.5", "http-proxy-middleware": "^2.0.1", "react": "18.2.0", "react-dom": "18.2.0", "react-markdown": "^9.0.1", "react-redux": "^8.1.3", "react-responsive": "^9.0.2", "react-router-dom": "^6.22.3", "react-scripts": "5.0.1", "react-syntax-highlighter": "^15.5.0", "typescript": "^4.9.5", "validator": "^13.7.0", "web-vitals": "^2.1.4", "yup": "^1.4.0" ``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

Search keywords: checkbox Order ID: 88959

michelengelen commented 1 month ago

To help us diagnose the issue efficiently, could you provide a stripped-down reproduction test case using the latest version? A live example would be fantastic! ✨

For your convenience, our documentation offers templates and guides on creating targeted examples: Support - Bug reproduction

Just a friendly reminder: clean, functional code with minimal dependencies is most helpful. Complex code can make it tougher to pinpoint the exact issue. Sometimes, simply going through the process of creating a minimal reproduction can even clarify the problem itself!

Thanks for your understanding! 🙇🏼

michelengelen commented 1 month ago

also we do have a solution for parent/children selection customization in this issue: #13036

sarthak-sit commented 1 month ago

@michelengelen Please find the zipped code , do npm install to install deps and npm start to bootstrap the app, The ui looks like the one I mentioned in the uploaded docx file. demo-app.zip CC @gnagesh02

michelengelen commented 1 month ago

Got it ... this is a duplicate of #13277 ... Please follow the code example from this comment: https://github.com/mui/mui-x/issues/13277#issuecomment-2142244288

github-actions[bot] commented 1 month ago

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@sarthak-sit: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

sarthak-sit commented 2 weeks ago

Got it ... this is a duplicate of #13277 ... Please follow the code example from this comment: #13277 (comment)

@michelengelen , The example in the comment is of data grid premium but I have example of data grid pro, could you please help me adding that piece of code in my example that I have shared.

flaviendelangle commented 1 week ago

Copy paste of my comment in #13630

Hi,

I think you can just use the checkboxColumn of the example @michelengelen did and use it in your project that uses Tree Data instead of Row Grouping :+1: If you struggle to do it, please add a reproduction case on Codesandbox or Stackblitz in the issue you linked, a zip is super hard to work with for us (and comes with security concerns) :+1:

I'm closing this issue and re-opening the initial one

sarthak-sit commented 1 week ago

Copy paste of my comment in #13630

Hi, I think you can just use the checkboxColumn of the example @michelengelen did and use it in your project that uses Tree Data instead of Row Grouping 👍 If you struggle to do it, please add a reproduction case on Codesandbox or Stackblitz in the issue you linked, a zip is super hard to work with for us (and comes with security concerns) 👍 I'm closing this issue and re-opening the initial one

@flaviendelangle @michelengelen Here is the sample code in sandbox, https://codesandbox.io/p/sandbox/loving-elion-6dfh55?file=%2Fpackage.json%3A16%2C30 Please let me know if you need anything.

sarthak-sit commented 1 week ago

@flaviendelangle @michelengelen Any update on my above comment ?

flaviendelangle commented 1 week ago

@michelengelen is on holiday, maybe @MBilalShafi can have a look I'm not working on the Data Grid

romgrk commented 5 days ago

@sarthak-sit You've already been advised to use the code example that was linked above, could you explain if there's something wrong with that example? The code will work regardless of pro/premium version.