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] Enable indeterminate state for row checkboxes #6177

Closed
tommcquarrie opened this issue Sep 16, 2022 · 3 comments · Fixed by #13757
Closed

[data grid] Enable indeterminate state for row checkboxes #6177

tommcquarrie opened this issue Sep 16, 2022 · 3 comments · Fixed by #13757
Labels
component: data grid This is the name of the generic UI component, not the React module! feature: Row grouping Related to the data grid Row grouping feature feature: Selection Related to the data grid Selection feature new feature New feature or request plan: Premium Impact at least one Premium user

Comments

@tommcquarrie
Copy link

tommcquarrie commented Sep 16, 2022

Summary 💡

This is somewhat related to this request but not necessarily dependent on it: #4248

We need the ability to select all/deselect all children based on a parent group selection. We've achieved this via our own selection state calculation. What we would also like to do though is show the group checkbox as indeterminate if you've only selected some of the children. it's possible that if you implement a solution for issue 4248, to make it consistent with the select all checkbox behaviour, indeterminate state might be supported out of the box. If not, there might be some other changes that could be made which might enable us to add this behaviour.

One option might be to enable the selectionModel to accept an array of strings or objects, and if it's an object, you can pass an id and an indeterminate flag: selectionModel={[{id: 1, indeterminate: true]}.

Another option we tried was to actually implement our own checkbox component wrapper and pass that as the base checkbox component used by the grid. We could control the indeterminate state ourselves if the checkbox was passed the row data as a prop, but currently it isn't.

Examples 🌈

Motivation 🔦

The select all checkbox already incorporates this behaviour, so not being able to replicate that for selecting a group makes the UX inconsistent for the user.

Order ID 💳 (optional)

45574

@tommcquarrie tommcquarrie added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Sep 16, 2022
@tommcquarrie tommcquarrie changed the title Enable indeterminate state for row checkboxes [data-grid] Enable indeterminate state for row checkboxes Sep 16, 2022
@cherniavskii cherniavskii added component: data grid This is the name of the generic UI component, not the React module! new feature New feature or request feature: Selection Related to the data grid Selection feature feature: Row grouping Related to the data grid Row grouping feature plan: Premium Impact at least one Premium user and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Sep 19, 2022
@cherniavskii cherniavskii moved this to 🆕 Needs refinement in MUI X Data Grid Sep 19, 2022
@HansBrende
Copy link

FYI @tommcquarrie I was able to accomplish this using the following hack: #4248 (comment)

@flaviendelangle flaviendelangle changed the title [data-grid] Enable indeterminate state for row checkboxes [data grid] Enable indeterminate state for row checkboxes Oct 17, 2022
@shahidify
Copy link

shahidify commented Jan 10, 2023

Any update on this issue/feature ?
I followed some of the suggestions given #4248 (comment) .
Here is an example - https://codesandbox.io/s/msk-mui-datagrid-pro-tree-selection-lnny5j
(still having an issue in determining checkbox's indeterminate state on n-level deep)

Copy link

github-actions bot commented Oct 4, 2024

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.

Note

We value your feedback @tommcquarrie! How was your experience with our support team?
We'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!

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: Row grouping Related to the data grid Row grouping feature feature: Selection Related to the data grid Selection feature new feature New feature or request plan: Premium Impact at least one Premium user
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants