[data grid] Print function not working with grouping

[gino880128]

The problem in depth

import * as React from "react";
import Box from "@mui/material/Box";
import { useMovieData } from "@mui/x-data-grid-generator";
import {
  DataGridPremium,
  GridColDef,
  GridToolbar,
} from "@mui/x-data-grid-premium";
import GradeIcon from "@mui/icons-material/Grade";

const ratingColDef: GridColDef = {
  field: "imdbRating",
  headerName: "Rating",
  type: "number",
  width: 150,
  renderCell: (params) => {
    if (
      params.rowNode.type === "group" &&
      params.field === params.rowNode.groupingField
    ) {
      return "";
    }
    return (
      <Box sx={{ display: "flex", alignItems: "center" }}>
        <GradeIcon htmlColor="#faaf00" />
        <span style={{ marginLeft: 2, marginRight: 8 }}>
          <b>{params.value}</b>/10
        </span>
      </Box>
    );
  },
};

export default function RowGroupingCustomCell() {
  const data = useMovieData();
  const columns = React.useMemo(
    () => [...data.columns, ratingColDef],
    [data.columns]
  );

  return (
    <Box sx={{ height: 350, width: "100%" }}>
      <DataGridPremium
        {...data}
        columns={columns}
        initialState={{ rowGrouping: { model: ["imdbRating"] } }}
        slots={{ toolbar: GridToolbar }}
      />
    </Box>
  );
}

the print function is not working with grouping, just try the print function in the gridtoolbar, this code is the same with https://codesandbox.io/p/sandbox/rough-fog-lhydfr?file=%2Fsrc%2FDemo.tsx except add a Gridtoolbar

Your environment

`npx @mui/envinfo`

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

System:
OS: macOS 14.3
Binaries:
Node: 18.17.0 - ~/.nvm/versions/node/v18.17.0/bin/node
npm: 6.14.14 - ~/.nvm/versions/node/v18.17.0/bin/npm
pnpm: Not Found
Browsers:
Chrome: 124.0.6367.91
Edge: 124.0.2478.67
Safari: 17.3
npmPackages:
@emotion/react: ^11.11.4 => 11.11.4
@emotion/styled: ^11.11.5 => 11.11.5
@mui/base: 5.0.0-beta.40
@mui/core-downloads-tracker: 5.15.15
@mui/icons-material: ^5.15.15 => 5.15.15
@mui/material: ^5.15.15 => 5.15.15
@mui/private-theming: 5.15.14
@mui/styled-engine: 5.15.14
@mui/system: 5.15.15
@mui/types: 7.2.14
@mui/utils: 5.15.14
@mui/x-data-grid: 7.3.1
@mui/x-data-grid-generator: ^7.3.1 => 7.3.1
@mui/x-data-grid-premium: 7.3.1
@mui/x-data-grid-pro: 7.3.1
@mui/x-license: 7.2.0
@types/react: ^18.3.1 => 18.3.1
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.1 => 18.3.1
typescript: ^4.9.5 => 4.9.5

Search keywords: Print
Order ID: #86660

[michelengelen]

Hey @gino880128
thanks for raising this issue.

I can confirm that an error is thrown when attempting to print a data grid that uses row grouping.

The reason this does not work is that the grid cannot determine the id for the auto generated grouping rows. I did find a solution for this:

diff --git a/packages/x-data-grid/src/hooks/features/rows/useGridRows.ts b/packages/x-data-grid/src/hooks/features/rows/useGridRows.ts
index f9001be70..5a6b88fe1 100644
--- a/packages/x-data-grid/src/hooks/features/rows/useGridRows.ts
+++ b/packages/x-data-grid/src/hooks/features/rows/useGridRows.ts
@@ -102,7 +102,7 @@ export const useGridRows = (

       const node = apiRef.current.getRowNode(id);
       if (node && isAutoGeneratedRow(node)) {
-        return { [GRID_ID_AUTOGENERATED]: id };
+        return { [GRID_ID_AUTOGENERATED]: id, id };
       }

       return null;

WDYT @MBilalShafi ? Would this be a valid fix or is there any side effects of returning the id this way?

[MBilalShafi]

Thanks @michelengelen for linking. After debugging it a bit, I think the root of the problem is the auto generated rows being included while preparing the rows for export and also while setting the rows back to the previous ones after closing of the print dialog which is technically incorrect because:

1. The auto-generated rows are regenerated on the updation of rows because of the rows pre-processor kicking in and they are not supposed to be passed to the setRows API method.
2. The auto-generated rows being passed don't have valuable information, it only contains [GRID_ID_AUTOGENERATED]: id as visible in the diff you posted.

So while the suggested fix could partially solve the problem, it may arise later because the auto-generated rows are part of the rows sent to the pre-processor.

I tried to fix the root cause of the problem in this PR, lmk how you feel about it.

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

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