[Grid] scrolling vertically causes unexpected behavior

[svetq]

Describe the bug When using a navigable Grid with virtual scrolling or virtual columns and the active cell of the Grid is not visible (the Grid is scrolled horizontally) then on scrolling vertically the Grid will move automatically the horizontal scrollbar.

To Reproduce Check the following example: Virtual scrolling - https://stackblitz.com/edit/angular-4hs2lm?file=app/app.component.ts Virtual columns - https://stackblitz.com/edit/angular-4fscm7?file=src%2Fapp%2Fapp.component.ts

1. Click a cell from the first "Product Name" column in order to focus it.
2. Scroll horizontally to the last column.
3. Scroll vertically.

Workaround If applicable, add screenshots to help explain your problem.

Browser

• OS: [for example, iOS]
• Browser [for example, Chrome, Safari]
• Version [for example, 22]

Additional context Add any other context about the problem here.

[Raisolution]

Also reported in thread 1555403

[mclear01]

Facing similar issue. Any update on when this issue may be addressed?

[naveedsheikh2304]

Facing similar issue for a possible another scenario i.e. when adding a column dynamically to the grid the horizontal scrollbar shifts towards right when navigable set to true or even false.

[shivambindal93]

+1

[Kir4n]

Work around capture the contentScroll event and move the focus out of the grid to a dummy element outside the grid.

https://angular-4fscm7-my8kfm.stackblitz.io

[ankurgupta12]

Work around capture the contentScroll event and move the focus out of the grid to a dummy element outside the grid.

https://angular-4fscm7-my8kfm.stackblitz.io

I have checked this solution but still not working for me.

[Kir4n]

Worst case comment out the cursor change event subscription altogether till it gets fixed by Kendo team. Setting Navigable to false also will do but then you will loose any navigability.

Find the following line in node_modules@progress\kendo-angular-grid\fesm2015\kendo-angular-grid.js

this.subs.add(this.cursor.changes
            .subscribe(args => this.onCursorChanges(args)));

Comment it out.

Please not that angular cache needs to be cleaned for the change to take effect. You can verify this by inspecting the Kendo grid source in browser.

[shivambindal93]

Worst case comment out the cursor change event subscription altogether till it gets fixed by Kendo team. Setting Navigable to false also will do but then you will loose any navigability.

Find the following line in node_modules@progress\kendo-angular-grid\fesm2015\kendo-angular-grid.js

this.subs.add(this.cursor.changes
            .subscribe(args => this.onCursorChanges(args)));

Comment it out.

Please note that the angular cache needs to be cleaned for the change to take effect. You can verify this by inspecting the Kendo grid source in the browser.

tried updating the function definition in the ngAfterViewInit hook, the fix works only when the virtualColumns property when the same is marked as "true", but has side effects, as navigation sometimes fails. Adding the code below and stack-blitz link for same

code link ->https://stackblitz.com/edit/angular-4fscm7-vjak6f?file=src/app/app.component.ts application link ->https://angular-4fscm7-vjak6f.stackblitz.io

if (this.kendoGrid && this.kendoGrid.navigationService) { this.kendoGrid.navigationService.onCursorChanges = () => {}; }

cc @mclear01 @naveedsheikh2304

[manoj-bheemireddy]

any solution for this issue?

[slavenai]

Fixed in v15.4.0 of kendo-angular-grid package.