[DataGrid] Allow to select range of rows with shift key #2456

flaviendelangle · 2021-08-26T14:44:22Z

Handle keyboard selection expansion / reduction with Shift
Handle click selection expansion / reduction with Shift
New method apiRef.current.selectRowRange to handle in a single place the keyboard and mouse range selection behavior

Preview: https://deploy-preview-2456--material-ui-x.netlify.app/components/data-grid/selection

m4theushw · 2021-08-26T16:56:04Z

There's this expandSelection method that I don't know why it exists, it seems to be related to some Shift + click functionality that it would be implemented. The blame doesn't point to any PR. You can either remove it or reuse it.

https://github.com/mui-org/material-ui-x/blob/b00994865cc5956ec765f85a36103fd62258f6bb/packages/grid/_modules_/grid/hooks/features/keyboard/useGridKeyboard.ts#L19

flaviendelangle · 2021-08-26T17:04:23Z

This method seems buggy
It was supposed to handle the selection with the keyboard, my PR was focusing more on the click selection, but I'll fix this one too 👍

packages/grid/_modules_/grid/components/cell/GridRowCells.tsx

flaviendelangle · 2021-09-23T22:26:57Z

@mui-org/x can we merge this PR once the release is done ?

I didn't approve it yet because the Shift + click was not working with checkboxSelection. Do you plan to work on #2456 (review)?

I was convinced I fixed this one...my bad if it is not. I will take a look

flaviendelangle · 2021-09-27T11:50:49Z

@m4theushw #2456 (review) is done 👍

packages/grid/_modules_/grid/components/columnSelection/GridCellCheckboxRenderer.tsx

docs/src/pages/components/data-grid/accessibility/accessibility.md

docs/src/pages/components/data-grid/getting-started/getting-started.md

docs/src/pages/components/data-grid/selection/selection.md

m4theushw · 2021-09-28T23:09:21Z

packages/grid/_modules_/grid/hooks/features/keyboard/useGridKeyboard.ts

-      if (selectedRowsIds.length > 0) {
-        const selectedRowsIndex = selectedRowsIds.map((id) => apiRef.current.getRowIndex(id));
+      const startRowIndex = Number(rowEl.getAttribute('data-rowindex'));
+      const startId = apiRef.current.getRowIdFromRowIndex(startRowIndex);


Selecting filtered rows with the keyboard is not working. The ID has to come from the selector, not from apiRef.current.getRowIdFromRowIndex.

packages/grid/_modules_/grid/components/columnSelection/GridCellCheckboxRenderer.tsx

packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts

Co-authored-by: Matheus Wichman <matheushw@outlook.com>

…arted.md Co-authored-by: Matheus Wichman <matheushw@outlook.com>

…y.md Co-authored-by: Matheus Wichman <matheushw@outlook.com>

packages/grid/_modules_/grid/components/columnSelection/GridHeaderCheckbox.tsx

packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts

packages/grid/_modules_/grid/constants/eventsConstants.ts

packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts

Co-authored-by: Matheus Wichman <matheushw@outlook.com>

[DataGrid] Allow to select range of rows with shift key

f3e4234

flaviendelangle added the component: data grid This is the name of the generic UI component, not the React module! label Aug 26, 2021

flaviendelangle self-assigned this Aug 26, 2021

Work

903fb99

flaviendelangle mentioned this pull request Aug 26, 2021

[test] Clean selection tests #2457

Merged

5 tasks

Rework

4bf5240

flaviendelangle added the breaking change label Aug 27, 2021

flaviendelangle added 2 commits August 27, 2021 11:05

Fix

373f09c

Fix

244220b

flaviendelangle commented Aug 27, 2021

View reviewed changes

packages/grid/_modules_/grid/components/cell/GridRowCells.tsx Outdated Show resolved Hide resolved

flaviendelangle added 6 commits September 1, 2021 09:36

Merge

3c75548

Work

ad00397

Regen docs

5e04bab

Add tests

d990c31

Fix

1523956

[DataGrid] Clean the selection public api

4ce88ad

flaviendelangle mentioned this pull request Sep 2, 2021

[DataGrid] Clean the selection public api #2523

Merged

flaviendelangle added the on hold There is a blocker, we need to wait label Sep 2, 2021

flaviendelangle added 6 commits September 2, 2021 10:49

Work

49590a5

Merge

d6e61c1

Fix

02d512c

Merge branch 'rework-selection-api' into selection-range

b247afa

Fix

0886d10

Merge

57d837e

flaviendelangle removed the breaking change label Sep 2, 2021

flaviendelangle added 3 commits September 3, 2021 11:15

Merge

781f7bd

Fix

e98c4d1

Merge

47b8a64

flaviendelangle added 3 commits September 27, 2021 13:07

Merge branch 'next' into selection-range

7b4edf0

Handle range selection on checkboxes

6bc387c

Fix docs

c6e2cc2

flaviendelangle commented Sep 27, 2021

View reviewed changes

packages/grid/_modules_/grid/components/columnSelection/GridCellCheckboxRenderer.tsx Outdated Show resolved Hide resolved

flaviendelangle requested a review from m4theushw September 27, 2021 11:55

m4theushw reviewed Sep 28, 2021

View reviewed changes

flaviendelangle and others added 9 commits September 29, 2021 08:55

Update docs/src/pages/components/data-grid/selection/selection.md

1cbc155

Co-authored-by: Matheus Wichman <matheushw@outlook.com>

Code review

30e7d8d

Update docs/src/pages/components/data-grid/getting-started/getting-st…

8801185

…arted.md Co-authored-by: Matheus Wichman <matheushw@outlook.com>

Update docs/src/pages/components/data-grid/accessibility/accessibilit…

5ba4eeb

…y.md Co-authored-by: Matheus Wichman <matheushw@outlook.com>

prettier

f81bd2e

Remove console

d8b1323

Use events for selection checkboxes

fb1f202

Proptypes

4a9ca83

Fix

02e5b52

flaviendelangle requested a review from m4theushw September 30, 2021 07:07

m4theushw reviewed Oct 1, 2021

View reviewed changes

packages/grid/_modules_/grid/components/columnSelection/GridHeaderCheckbox.tsx Outdated Show resolved Hide resolved

packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts Outdated Show resolved Hide resolved

flaviendelangle added 2 commits October 1, 2021 08:37

Merge branch 'next' into selection-range

c61bc1d

Code review

946ed4f

flaviendelangle requested a review from m4theushw October 1, 2021 07:11

flaviendelangle added 2 commits October 4, 2021 09:49

Code review

c014676

Remove header checkbox improvments

95b5def

m4theushw approved these changes Oct 5, 2021

View reviewed changes

packages/grid/_modules_/grid/constants/eventsConstants.ts Outdated Show resolved Hide resolved

packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts Outdated Show resolved Hide resolved

flaviendelangle and others added 3 commits October 5, 2021 19:12

Update packages/grid/_modules_/grid/constants/eventsConstants.ts

13c9d36

Co-authored-by: Matheus Wichman <matheushw@outlook.com>

Clean expandSelection

7be97ba

Regen docs

94d40ce

flaviendelangle merged commit f64dfdf into mui:next Oct 5, 2021

flaviendelangle deleted the selection-range branch October 5, 2021 19:06

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGrid] Allow to select range of rows with shift key #2456

[DataGrid] Allow to select range of rows with shift key #2456

flaviendelangle commented Aug 26, 2021 •

edited by m4theushw

Loading

m4theushw commented Aug 26, 2021

flaviendelangle commented Aug 26, 2021 •

edited

Loading

flaviendelangle commented Sep 23, 2021

flaviendelangle commented Sep 27, 2021

m4theushw Sep 28, 2021

[DataGrid] Allow to select range of rows with shift key #2456

[DataGrid] Allow to select range of rows with shift key #2456

Conversation

flaviendelangle commented Aug 26, 2021 • edited by m4theushw Loading

m4theushw commented Aug 26, 2021

flaviendelangle commented Aug 26, 2021 • edited Loading

flaviendelangle commented Sep 23, 2021

flaviendelangle commented Sep 27, 2021

m4theushw Sep 28, 2021

Choose a reason for hiding this comment

flaviendelangle commented Aug 26, 2021 •

edited by m4theushw

Loading

flaviendelangle commented Aug 26, 2021 •

edited

Loading