With scrollbarV enabled after scrolling the selection of a single row is not working

[Mojo1]

I'm submitting a ... (check one with "x")

[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

with scrollbarV enabled after scrolling the selection of a single row is not working on the rows which are apperaring in viewport after scroll actuall if there is a scroll again the selection happens

Expected behavior

row should be selected

Reproduction of the problem

issue is triggered in @swimlane\ngx-datatable\release\components\body\body.component.js -> DataTableBodyComponent.prototype.updateRows -> this.cd.detectChanges();

What is the motivation / use case for changing the behavior?

after scrolling i want to select a row Please tell us about your environment:

nginx gulp debian

• Table version: 11.1.7

• Angular version: 4.4.6

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

  Chrome 64.0.3282.119

• Language: [all | TypeScript X.X | ES6/7 | ES5] TS 2.6.2

[jjoaoclaro]

Have the same problem but with deleting a row

I have a button on each row that calls a method to remove the row from the array. if i scroll a bit and try to remove, the method is called, the row is removed but the table doesn't update

[flosch0815]

Have the same problem.

But in my case, it just takes a very long time to get the visual feedback in form of the css-class which is bound to the row with a very huge delay.

[sabbynair]

I see this issue with both 11.1.5 and 11.2.0. If I perform a vertical scroll, row selection goes for a toss. I also thought it might just be the case of visual feedback alone and so I added onSelect listeners. Sometimes, it doesnt even register a click. Even without the scroll, I feel row select doesnt work 100% of the time.

Some info: Ngx-datatable version: 11.1.5, 11.2.0 Angular version: 5.1.2 Typescript version: 2.4.2 Browser: Chrome

In my case, both the columns and the data is dynamic and gets set a later point. With 11.1.5, the column headers would not align themselves properly and it required a vertical scroll to fix the column widths. With 11.2.0, column widths are ok but sometimes the first row does not appear and a scroll fixes that.

Either way, I too am facing row selection issues with vertical scroll.

Can anyone suggest a workaround for this?

Thanks, Sabariesh.

[sabbynair]

Hi, Reverting back to 11.0.4 or 11.0.0 helped avoid this issue. However, even with older vesions, I feel that hit ratio of selecting rows with 'multi' mode is not a 100%. Also, I am not sure if it is related to #1309 . Can anyone else suggest anything else that I can try?

Thanks, Sabariesh.

[sabbynair]

Some more udpates. I found that my cell templates had a margin and margins dont register clicks. The margins were added purely for the purpose of aligning the content in the grid. So i changed my cell templates to have padding instead of margins and the clicks are not getting registered.

However, this is not related to the original issue. This is the explanation for 11.0.4 not registering all clicks. The original issue with scrolling resulting in problems with row selection still exists.

Thanks, Sabariesh.

[DeniseCP]

I am using 11.2.0 and I am still facing the same issue. Is there an ETA to solve this?

[mrtbyram]

Below workaround worked for me in version 11.0.4. A mouse click on anywhere in screen solves the problem. So you can click to container div or directly on table when check box changed.

onCheckBoxChange(){
    document.getElementById(<elementId>).click();
}

[Mojo1]

Hey Hi mrtbyram,

as you are writing this i want to hint you to another workaround we found for this kind of issues with the table which are present on more than one place :

this.datatable.recalculate();
this.datatable['cd'].detectChanges();

not nice but doable :P