[data grid] Select All Functionality in Tree View

[mahammahmood]

Latest version

• I have tested the latest version

The problem in depth

When I click on 'Select All', all the checkboxes are checked. However, if I then uncheck any checkbox and expand any child, it becomes checked again because I use useEffect to update the row checkbox state when the state changes. Can you suggest a solution to achieve the expected behavior? Specifically, when I click 'Select All', it should select all checkboxes; if I unselect any checkbox individually, it should stay unselected; and if I click 'Unselect All', it should unselect all selected checkboxes.

Here is the live demo:
DEMO

Here is the video of the issue:
https://github.com/user-attachments/assets/c7a8a5e0-f8c9-42bd-8f1e-7877035d6a0f

Your environment

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Data ,Grid , Premium, Tree, data, Select, All
Order ID: 91010

[michelengelen]

Hey @mahammahmood ... there is an open PR currently in the works (#13757) that will include exactly the behavior you are expecting.
Would you be able to update to the next version once this has merged?

Otherwise we already have a workaround for this here: #13391 (comment)

[mahammahmood]

Hey @michelengelen My functionality is different; I did not use the 'Select All' from DataGrid. Instead, I manually set the checkboxes in handleCheckboxChange() and used a separate button in the toolbar for selecting all checkboxes. Please guide me according to my code.

[arminmeh]

Hi @mahammahmood
This happens because of the useEffect that you have in the custom cell renderer.
Once the row is expanded, new rows are being rendered and the useEffect is triggered again which changes the state of the checkbox.
You can see that this does not happen if you do not click Select all button, but manually select all rows.
In that case isToggleSelectAll is false and the value resolves to the value of the checkbox state

To fix this, you will have to change the way you are updating all checkboxes after clicking on the Select all button.

Hope that this helps

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

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

[mahammahmood]

Hi @mahammahmood This happens because of the useEffect that you have in the custom cell renderer. Once the row is expanded, new rows are being rendered and the useEffect is triggered again which changes the state of the checkbox. You can see that this does not happen if you do not click Select all button, but manually select all rows. In that case isToggleSelectAll is false and the value resolves to the value of the checkbox state

To fix this, you will have to change the way you are updating all checkboxes after clicking on the Select all button.

Hope that this helps

can you provide any other solution.

[arminmeh]

you would have to deal with the checkbox state change in your select all handler rather in the row itself.
is there a reason you are not using row selection feature we have in the grid?

[mahammahmood]

you would have to deal with the checkbox state change in your select all handler rather in the row itself. is there a reason you are not using row selection feature we have in the grid?

Yes, there is a reason I don't use row selection: the functionality I want cannot be achieved with it. In row selection, we are unable to select all the child nodes when a parent node is selected, and when not all the child nodes are selected, the parent node becomes indeterminate.