Skip to content

Conversation

@DanailH
Copy link
Member

@DanailH DanailH commented Nov 4, 2020

Fixes #416

This PR adds the ability to resize columns on touch devices. The solution was taken from the Slider component that is part of the core repo -> https://github.com/mui-org/material-ui/blob/0d0e370c6e783f967fbd922ac925f576bee2b9ae/packages/material-ui/src/Slider/Slider.js#L675

Preview: https://deploy-preview-537--material-ui-x.netlify.app/components/data-grid/#commercial-version

@oliviertassinari oliviertassinari changed the title Add touch support on column resize [DataGrid] Add touch support on column resize Nov 4, 2020
@oliviertassinari oliviertassinari added scope: data grid Changes related to the data grid. type: new feature Expand the scope of the product to solve a new problem. labels Nov 4, 2020
Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • On Android, I can no longer sort
  • On iOS it sorts when I resize

@oliviertassinari
Copy link
Member

oliviertassinari commented Nov 6, 2020

The hover style gets persisted on mobile, fixed in d8df748.

Capture d’écran 2020-11-06 à 14 04 42

@oliviertassinari
Copy link
Member

oliviertassinari commented Nov 6, 2020

The following error is thrown when using the resize (dev & prod)

Capture d’écran 2020-11-06 à 14 07 37

That was because the touchstart event was attaching to the document and was being fired multiple time if you have more than 1 grid on the page, I changed it so now it attaches to the columns header.

@oliviertassinari
Copy link
Member

oliviertassinari commented Nov 6, 2020

@DanailH Well done :). We don't have any resizing tests for the mouse part of the logic. I think that we could consider adding some, but I think that it can be merged without. We could wait to solve a regression to add them.

@oliviertassinari oliviertassinari force-pushed the feature/DataGrid-416-column-resize-mobile-support branch from c4f72cd to 1551072 Compare November 9, 2020 13:33
…ithub.com:DanailH/material-ui-x into feature/DataGrid-416-column-resize-mobile-support
@DanailH DanailH merged commit 02de9d2 into mui:master Nov 9, 2020
dtassone pushed a commit to dtassone/material-ui-x that referenced this pull request Nov 9, 2020
* Add support for touch column resize

* Change the touch start event listner from the separator to the document

* Allow resizing on mobile only when column separator is touched

* fix hover

* Attach touchStart event to the columns header element, not the document

* Add support for touch column resize

* Change the touch start event listner from the separator to the document

* Allow resizing on mobile only when column separator is touched

* Attach touchStart event to the columns header element, not the document

* fix hover

* minimize git diff

* Use findParentElementFromClassName dom util

* Add new findHeaderElementFromField dom util

Co-authored-by: Olivier Tassinari <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

scope: data grid Changes related to the data grid. type: new feature Expand the scope of the product to solve a new problem.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[DataGrid] Add support for Column resizing on mobile

3 participants