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

[sarthak-sit]

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]

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]

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

[sarthak-sit]

@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]

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

[github-actions]

⚠️ 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]

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]

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

[sarthak-sit]

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]

@flaviendelangle @michelengelen Any update on my above comment ?

[flaviendelangle]

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

[romgrk]

@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.

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.