Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Frozen Rows not scrolling up and down properly #737

Closed
6pac opened this issue Mar 19, 2023 · 3 comments
Closed

Frozen Rows not scrolling up and down properly #737

6pac opened this issue Mar 19, 2023 · 3 comments

Comments

@6pac
Copy link
Owner

6pac commented Mar 19, 2023

Slickgrid-FrozenRows

Example example-frozen-rows.html exhibits strange scrolling behaviour when selecting froxen rows at the top. See GIF.

I've been trying to track down the cause of this, but thought you might know it immediately @ghiscoding ?

@ghiscoding
Copy link
Collaborator

ghiscoding commented Mar 19, 2023

try rolling back my PR from yesterday and see if that makes any difference, it might be the cause... actually, probably not since it's only enabled when it's not frozen row. It seems like the scrollbar height is not calculated properly when using top frozen rows. I don't really know why, it might be another new bug we introduced after removing jQueryUI

@ghiscoding
Copy link
Collaborator

moving the comment I wrote in #761

While we're on a roll, #737 still appears to be a problem. Happy to look, but you just seem to be 'in the zone' right now, so I suspect what might take me several hours you may be able to do in 15 minutes.

I think this one is cause by the bottom container not being entirely filled except when you start scrolling then it adds more slick rows, a potential fix would be trigger a scroll event at same position when frozen row is changed to bottom.

Actually taking a quick look at it, I see that the problem is because the height is not recalculated properly after changing the frozen row dynamically. If you use this css style height: 1.24988e+06px; width: 1040px; (which is a copy of the grid-canvas grid-canvas-top grid-canvas-left and you apply it to the bottom (after changing frozen row that is), it will work as expected

from this
image

to this
image

the problem is I don't know how that height is being calculated correctly when we initialize the grid but not after. A potential quick hack fix would be to copy the one from the top into the bottom and vice versa when you do the inverse but that has a potential issue when user also changes the number of frozen rows (not just top/bottom toggle).... so anyway, I have identified the issue but not a real fix 😝

I actually wonder if that height that I wrote about is actually these ones from the default options

SlickGrid/slick.grid.js

Lines 115 to 116 in 21fe941

ffMaxSupportedCssHeight: 6000000,
maxSupportedCssHeight: 1000000000,

brave_Uc2JFETRIw

ghiscoding added a commit that referenced this issue May 13, 2023
- when changing frozen rows via `setOptions`, it should recalculate each viewports (top/bottom)
- the previous code skipped scroll height recalculation and that caused the issue identified in #737
6pac pushed a commit that referenced this issue May 14, 2023
)

- when changing frozen rows via `setOptions`, it should recalculate each viewports (top/bottom)
- the previous code skipped scroll height recalculation and that caused the issue identified in #737
@ghiscoding
Copy link
Collaborator

closed by #774

6pac added a commit that referenced this issue May 18, 2023
* feat!: Drop jQuery requirement  (#734)

* feat!: Drop jQuery requirement

* fix: addresses all issues found in jQuery removal previous PR #734 (#742)

- fixes some errors that came up while testing the whole thing in Slickgrid-Universal

* feat(plugins): convert slick.draggablegrouping to vanillaJS (#744)

- fix ESLint for Cypress
- also remove jQuery from package.json list of dependencies

* show tooltip if the cell content is taller than the cell height - fixes #740 (#741)

* show tooltip if the cell content is taller than the cell height

The current code does not show a tooltip when word wrap is turned on and the text is taller than the cell height.

* combined height check with width check

* fix: enable AutoScroll with SortableJS for column reordering, fixes #735 (#736)

* fix: enable AutoScroll with SortableJS for column reordering, fixes #735

* chore: add auto-scroll comment for clarity

* chore(ci): run Cypress on the `next` branch as well as `main`

* feat(plugin): convert slick.autotooltips to vanillaJS (#745)

- remove jQuery from plugin and also in the autotooltip example as well

* chore: fix some UI issues in draggable grouping plugin

* feat(plugins): convert copy manager plugins to vanillaJS (#746)

* feat(plugins): remove jQuery from slick.customtooltip plugin (#747)

* feat(plugins): remove jQuery from header buttons/menus plugins (#748)

* chore: apply better code styling to few core files (#749)

* chore: apply better code styling to few core files

* feat(plugins): remove jQuery from ColumnPicker & GridMenu controls (#752)

* feat(plugins): remove jQuery from ColumnPicker & GridMenu controls

* tests: use input checked property instead of attr checked
- the previous code with `attr('checked')` was jQuery oriented and we are going away from jQuery

* feat(plugins): remove jQuery from CellMenu & ContextMenu plugins (#753)

* feat(plugins): remove jQuery from range decorator selection model (#754)

* feat(plugins): remove jQuery from range decorator selection model

* feat(plugins): remove jQuery from CheckboxSelectColumn plugins (#755)

* feat(plugins): remove jQuery from RowMove plugins (#756)

* feat(plugins): remove jQuery from Grid State plugin (#757)

* feat(plugins): remove jQuery from Grid Resizer plugin (#758)

* chore: remove Map polyfill since we will target ES6 (#759)

- Slick.Map polyfill is no longer required since Map is included in ES6 browsers

* feat(plugins): remove jQuery from Row Detail plugin (#760)

* Correct some instances of migration from $.each() to iteration (return needs to become continue)

* chore: remove eval & grep utils and replace with simple ES6 filter

* fix: filter header row should follow grid scroll

* feat(controls): remove jQuery from Slick Pager control (#762)

* fix: scrolling for all containers should work for regular & frozen grids

* fix: add missing aria accessibility (#764)

- closes #586, #587, #588 and #678

* chore: filling the window should be used with slick.resizer, closes #515

* chore: migrate more examples to vanilla JS with DOMContentLoaded

* chore: convert html template to pure DOM create element with JS (#766)

* chore: remove jQuery from all possible examples (#767)

* chore: fix html code showing up in column picker & grid menu picker (#768)

* fix(core): set wheel/touch listeners to passive for better perf (#769)

- this fixes warnings shown in Chrome and other browser console mentioning that we should consider using `passive` event listeners
- also uses a polyfill in case the `passive` option is not supported (for example IE)

* chore: better use of DOM element creation and innerHTML (#770)

- also remove `passive` mode to certain events that use preventDefault since that is not compatible with `passive` mode

* chore: remove jQuery from lib folder, replace with CDN (#771)

* Bugfix/example issues fixes (#772)

* fix: found a few small issues while testing examples with jQuery CDN

* fix: throw error when freezing columns are wider than canvas (#773)

- closes #667
- freezing columns cannot be wider than the actual grid canvas because when that happens, the viewport scroll becomes hidden behind the canvas... so let's throw an error advising the user to make adjustments

* fix: toggling frozen rows should recalc scroll height, closes #737 (#774)

- when changing frozen rows via `setOptions`, it should recalculate each viewports (top/bottom)
- the previous code skipped scroll height recalculation and that caused the issue identified in #737

* feat: Enable hidden property for column. Adds example-column-hidden, method… (#765)

* Enable hidden property for column. Adds example-column-hidden, method getVisibleColumns() and alternate method updateColumns() calling event onBeforeUpdateColumns() for when a hidden property has changed but the column list itself has not changed.

* remove jQuery from example and add frozen rows/hidden cols example

* final changes: add frozen columns example, fix issue with hidden columns on frozen grid boundary, fix gridmenu control to work with .hidden flag on columns)

* changes as suggested in #765

* feat: remove legacy TreeColumns code - now unused (#775)

* remove legacy treecolumns code - now unused

* fix typo and add back apparently unnecessary call to setcolumns() which does in fact do crucial refreshing of grid structure

* chore: fix a small editor problem with percent editor

* chore(release): publish version 4.0.0-beta.0

* chore: add migration guide to v4.0 link in changelog

* chore: remove jQuery from Example 4

---------

Co-authored-by: Marko B. Ludolph <der.ludi@web.de>
Co-authored-by: tr4npt <tranp@fastmail.us>
Co-authored-by: Ben McIntyre <email.ben.mcintyre@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants