[data grid] Group Item With Checkbox Select Children

[KSafadi]

The problem in depth

I have a grouping in my MUI DataGrid and a checkbox selection. When the checkbox of the group headers are clicked, nothing happens. I need all the children to be selected when the group is selected, similar to the header checkbox selection.
I have provided a demo: https://stackblitz.com/edit/react-mqcgmm?file=Demo.tsx

Your environment

`npx @mui/envinfo`

System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 18.17.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.0.5 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Chromium (123.0.2420.97)
  npmPackages:
    @emotion/react: 11.11.3 => 11.11.3
    @emotion/styled: 11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.37
    @mui/core-downloads-tracker:  5.15.11
    @mui/lab: 5.0.0-alpha.166 => 5.0.0-alpha.166
    @mui/material: 5.15.11 => 5.15.11
    @mui/private-theming:  5.15.14
    @mui/styled-engine:  5.15.14
    @mui/system: 5.15.11 => 5.15.11
    @mui/types:  7.2.14
    @mui/utils: 5.15.11 => 5.15.11
    @mui/x-data-grid:  7.4.0
    @mui/x-data-grid-premium: 7.4.0 => 7.4.0
    @mui/x-data-grid-pro:  7.4.0
    @mui/x-date-pickers: 6.19.5 => 6.19.5
    @mui/x-license: ^7.2.0 => 7.2.0
    @types/react: 18.2.58 => 18.2.58
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: 5.3.3 => 5.3.3

Search keywords: DataGrid Grouping CheckBox Selection
Order ID: 89911

[michelengelen]

@cherniavskii we had a similar issue already, but I cannot find it ... 🤔
can you remember where that was?

[michelengelen]

@cherniavskii nvm ... found it.

@KSafadi we currently do not support this behavior OOTB, but we have a working example written up here: #13036

This basically does exactly what you want.

Let me know if using this fixes your use case!

[tsafadi]

Could you show how to integrate this into the sample that was provided?
I am not sure how to integrate the checkboxColumn and also I am not able to get the imports correctly.

[KSafadi]

I have the same problem as @tsafadi. Could you please add the checkboxColumn to the sample provided. Thank you very much.

[michelengelen]

@KSafadi @tsafadi here is the updated example

[michelengelen]

@KSafadi did this solution work for you?

[KSafadi]

Yes, thank you so much! Sorry for the delay

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

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

[santhoshsis]

@michelengelen The header checkbox is not working as expected like when we click on it it is selecting everything but when selecting it again was not deselecting all. Also when we remove some selections from the rows it should go to indeterminate state but nothing is happening! I tried to debug and but nothing worked!

[tsafadi]

@KSafadi @tsafadi here is the updated example

The solution that you provided is perfect. However, the select all from the header does not work anymore. Could you show how to fix that? Or is there an option to disable or remove the checkbox from the header?

[Hiteshshingala]

🎉 Checkbox Selection Enhancement for MUI DataGrid

Great news, @michelengelen @tsafadi! I've addressed the issue you reported with the header checkbox functionality. This solution improves the user experience and brings the checkbox behavior in line with expected standards.

🔧 Key Improvements:

1. Header Checkbox Consistency: Now correctly toggles between select all and deselect all states.
2. Indeterminate State: Properly reflects partial selections in both header and group row checkboxes.
3. Group Row Handling: Enhanced to manage selections within grouped data accurately.

💡 Implementation Highlights:

• Utilizes gridFilteredSortedRowIdsSelector for precise row management.
• Implements custom renderHeader and renderCell functions for granular control.
• Leverages useGridSelector with gridRowSelectionStateSelector for efficient state management.

🚀 Benefits:

• Improved data interaction and visualization.
• Enhanced user control over selections.
• Consistent behavior across different data structures (flat and grouped).

#MUI #OpenSource #DataGrid #UserExperience

const checkboxColumn = (apiRef: MutableRefObject<GridApiPro>): GridColDef => {
    return {
      ...GRID_CHECKBOX_SELECTION_COL_DEF,
      renderHeader: function RenderHeader(params) {
        const children = gridFilteredSortedRowIdsSelector(
          apiRef.current.state,
          apiRef.current.instanceId
        ).filter((id) => !id.toString().includes("auto-generated"));

        const selectionLookup = useGridSelector(
          apiRef,
          gridRowSelectionStateSelector
        );

        const indeterminate =
          children?.some((child) => selectionLookup.includes(child)) &&
          children?.some((child) => !selectionLookup.includes(child));

        const checked = children?.every((child) =>
          selectionLookup.includes(child)
        );
        const data: GridColumnHeaderParams & {
          indeterminate?: boolean;
          checked?: boolean;
          disabled?: boolean;
          onClick?: (e: MouseEvent) => void;
        } = {
          ...params,
          onClick: (e) => {
            apiRef.current.selectRows(children, indeterminate || !checked);
            e.preventDefault();
          },
          indeterminate,
          checked,
        };
        return (
          <>
            <GridHeaderCheckbox {...data} />
          </>
        );
      },
      renderCell: function RenderCell(params) {
        const { rowNode } = params;

        const selectionLookup = useGridSelector(
          apiRef,
          gridRowSelectionStateSelector
        );

        if (rowNode.type !== "group") {
          return <GridCellCheckboxRenderer {...params} />;
        }

        const children = apiRef.current.getRowGroupChildren({
          groupId: rowNode.id,
          applyFiltering: true,
          applySorting: true,
        });

        const indeterminate =
          children?.some((child) => selectionLookup.includes(child)) &&
          children?.some((child) => !selectionLookup.includes(child));

        const checked = children?.every((child) =>
          selectionLookup.includes(child)
        );

        const extraData: GridRenderCellParams & {
          indeterminate?: boolean;
          checked?: boolean;
          disabled?: boolean;
          onClick?: (e: MouseEvent) => void;
        } = {
          ...params,
          disabled: false,
          onClick: (e) => {
            if (rowNode.type === "group") {
              if (children) {
                apiRef.current.selectRows(
                  [rowNode.id, ...children],
                  indeterminate || !checked
                );
              }
              e.preventDefault();
            }
          },
          indeterminate,
          checked,
        };

        return <GridCellCheckboxRenderer {...extraData} />;
      },
    };
  };