[DataGrid] Fix checkboxSelectionVisibleOnly behavior with server-si…

…de pagination (#14083)
mui · Aug 7, 2024 · 883d1f8 · 883d1f8
1 parent 36ec2d7
commit 883d1f8
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 7 deletions.
diff --git a/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx b/packages/x-data-grid-pro/src/tests/rowSelection.DataGridPro.test.tsx
@@ -210,6 +210,49 @@ describe('<DataGridPro /> - Row selection', () => {
       });
       expect(selectAllCheckbox).to.have.attr('data-indeterminate', 'false');
     });
+
+    it('should allow to select all the current page rows when props.paginationMode="server"', () => {
+      function TestDataGridSelectionServerSide({
+        rowLength = 4,
+      }: Omit<DataGridProProps, 'rows' | 'columns' | 'apiRef'> &
+        Partial<Pick<DataGridProProps, 'rows' | 'columns'>> & { rowLength?: number }) {
+        apiRef = useGridApiRef();
+        const paginationModel = { pageSize: 2, page: 1 };
+
+        const data = React.useMemo(() => getBasicGridData(rowLength, 2), [rowLength]);
+
+        const rows = data.rows.slice(
+          paginationModel.pageSize * paginationModel.page,
+          paginationModel.pageSize * (paginationModel.page + 1),
+        );
+
+        return (
+          <div style={{ width: 300, height: 300 }}>
+            <DataGridPro
+              {...data}
+              rows={rows}
+              checkboxSelection
+              checkboxSelectionVisibleOnly
+              initialState={{ pagination: { paginationModel } }}
+              pagination
+              paginationMode="server"
+              pageSizeOptions={[2]}
+              apiRef={apiRef}
+              rowCount={rowLength}
+              disableVirtualization
+            />
+          </div>
+        );
+      }
+      render(<TestDataGridSelectionServerSide />);
+
+      const selectAllCheckbox = screen.getByRole('checkbox', {
+        name: /select all rows/i,
+      });
+
+      fireEvent.click(selectAllCheckbox);
+      expect(apiRef.current.getSelectedRows()).to.have.length(2);
+    });
   });
 
   describe('apiRef: getSelectedRows', () => {

diff --git a/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts b/packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts
@@ -443,17 +443,15 @@ export const useGridRowSelection = (
     GridEventListener<'headerSelectionCheckboxChange'>
   >(
     (params) => {
-      const shouldLimitSelectionToCurrentPage =
-        props.checkboxSelectionVisibleOnly && props.pagination;
-
-      const rowsToBeSelected = shouldLimitSelectionToCurrentPage
-        ? gridPaginatedVisibleSortedGridRowIdsSelector(apiRef)
-        : gridExpandedSortedRowIdsSelector(apiRef);
+      const rowsToBeSelected =
+        props.pagination && props.checkboxSelectionVisibleOnly && props.paginationMode === 'client'
+          ? gridPaginatedVisibleSortedGridRowIdsSelector(apiRef)
+          : gridExpandedSortedRowIdsSelector(apiRef);
 
       const filterModel = gridFilterModelSelector(apiRef);
       apiRef.current.selectRows(rowsToBeSelected, params.value, filterModel?.items.length > 0);
     },
-    [apiRef, props.checkboxSelectionVisibleOnly, props.pagination],
+    [apiRef, props.checkboxSelectionVisibleOnly, props.pagination, props.paginationMode],
   );
 
   const handleCellKeyDown = React.useCallback<GridEventListener<'cellKeyDown'>>(